CSS Row Aligning Issue

Question

У меня есть некоторые проблемы с CSS. Я сделал ряд с изображениями и некоторыми текстами. Но границы изображений не совпадают. Вот об этом screenshot. И мои коды CSS, которые я использую:

.portfolyo-foto { 
    width: 149px; 
    margin-right: 1.2%; 
    border: 1px dashed black; 
    display: inline-table; 
} 

.portfolyo-cerceve { 
    width: 100%; 
    padding-left: 0%; 
    height: 100%; 
} 

.leftTypeWrapperOuter { 
    width: 75%; 
    position: relative; 
    float: right; 
    margin-right: 13%; 
} 

.clearfix { 
    display: block; 
} 

Большое спасибо.

Answer 1

Вы должны включить ссылку в div.

<div class="portfolyo-foto"> 
    <img width="100" height="100" src="" /> 
    <a href="#">All</a> 
</div> 

и добавить это правило в CSS:

.works-filter a, 
.works-filter a.active{ 
    margin:0; 
} 

Кроме того, помните, что это хорошая практика, чтобы разделить все необходимый код.

Answer 2

Если переместить ссылки на нижней части изображения:

<div class="portfolyo-foto"> 
    <img src="http://ailuros.bursasinemalari.com/wp-content/uploads/2016/08/placeholder.png" width="100" height="100"> 
    <a href="#" class="filter active" data-filter="*">All</a> 
</div> 

и применить следующий CSS:

.works-filter { 
    width: 100%; 
} 
.works-filter a { 
    margin: 0; /* overwriting previous margin: 0 5px */ 
} 

вы получите:

---

Update: Перестановка теги А в шаблоне

// temporary array to hold a tags 
$a_tags = []; 

$portfolioTagsArray = array(); 
$postCounter = 0; 
if (have_posts()) { 
    while (have_posts()) { 
     the_post(); 
     $postCounter++; 
      $t = wp_get_post_terms($post->ID, 'ff-portfolio-tag'); 
      if(!empty($t)) foreach ($t as $onePortfolioTag) { 
       if(!isset($portfolioTagsArray[ $onePortfolioTag->slug ])) { 
        // instead of creating a really long string which contains multiple a tags 
        // store the a tags individually inside an array 
        $a_tags[] = '<a href="#" class="filter" data-filter=".tag-'.esc_attr($onePortfolioTag->term_id).'">'.ff_wp_kses($onePortfolioTag->name).'</a>'; 
       } 
       $portfolioTagsArray[ $onePortfolioTag->slug ] = $onePortfolioTag; 
      } 
      if($numberOfPosts > 0 && $postCounter >= $numberOfPosts) { 
       break; 
      } 
    } 
} 

$terms = apply_filters('taxonomy-images-get-terms', '', array('taxonomy' => 'ff-portfolio-tag')); 

// now I think, length of $terms array and $a_tags array are equal 
// and their items correspond with each other 
// if so, what you need to do is 
// when you print the div.portfolyo-foto and the img 
// simply add the corresponding a tag before closing the div 
if (! empty($terms)) { 
    foreach ((array) $terms as $key => $term) { 
     print '<div class="portfolyo-foto">'; 
     print wp_get_attachment_image($term->image_id, 'taxonomy-thumb'); 
     print $a_tags[$key]; // $key should be index, e.g. 0,1,2,3, etc. 
     print '</div>'; 
    } 
}