CSS行對齊問題

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 */ 
} 

你會得到：

---

更新：重新定位一個標籤模板

// 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>'; 
    } 
}