html元素没有高度

Question

我的元素没有高度，但它现在充满了图像，除非我给 .portfolio 一个固定的高度，否则图像周围的 anchor 是不可点击的。

关于如何解决这个问题有什么建议吗？

HTML :

    <h1 class="text-center">
        Een greep uit ons portfolio
    </h1>
    <span class="main-underline"></span>

    <div class="portfolio">
        <?php
        $args = array( 'post_type' => 'portfolio', 'posts_per_page' => 4 );
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post();
            ?>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="portfolio-img">
                    <a href="<?php echo esc_url( get_permalink() ); ?>">
                        <?php the_post_thumbnail('portfolio',array('class' => 'img-responsive')); ?>
                    </a>
                </div>
            </div>
        <?php endwhile; ?>
    </div>

CSS:

/*PORTFOLIO*/

#main2 {

}

.portfolio {

}

.portfolio .portfolio-img img{
    width:100%;
}

.portfolio .col-md-3 {
    margin:0;
    padding:0;
}

结果:

提前致谢

Answer 1

将a的display设置为inline-block。