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

CSS行对齐问题

2 个答案: