javascript - 如何使用css使div高度适合内容

Question

我创建了一个网站，有一个元素列表显示如下:

<?php foreach($category->getHighlightedProject() as $project):?>
    <div class="portfolio-project">
        <?php 
            $photo = $project->getTopMostPhoto($project->project_id);
            if ($photo):
        ?>
        <img src="<?php echo Yii::app()->baseUrl."/".Yii::app()->params['uploadPath']."/".Yii::app()->params['project']['uploadPath']."/".$photo->getPhotoNameWithSize($photo->project_photo_image_file_name, ProjectPhoto::SIZE_MEDIUM);?>" alt="<?php echo $project->project_name;?>"/>
        <div class="portfolio-desc">
            <div class="portfolio-desc-title"><?php echo $project->project_name;?></div>
            <div class="portfolio-desc-short-desc"><?php echo $project->project_short_desc;?></div>
        </div>
        <?php endif;?>
    </div>
<?php endforeach;?>

如果一个元素被悬停，.portfolio-desc 将弹出，但仍在 .portfolio-project 中。

这是CSS:

.portfolio-highlight {margin-top: 30px; text-align: center;}
.portfolio-item {width: 25%; float: left;}
.portfolio-category {margin-bottom: 30px;}
.portfolio-category a{font-size: 16px; font-family: 'ralewaybold';}
.portfolio-project {height: auto; position: relative; overflow:auto;}
.portfolio-project img {max-width: 100%;}
.portfolio-desc {display: none; width: 90%; height: 80px; position: absolute; bottom: 0; background: url('../img/portfolio-desc-bg.png') repeat 0 0; color: #FFF; padding: 5%; line-height: 2.0em;}
.portfolio-desc-title {font-size: 16px; font-family: 'ralewayextrabold';}
.portfolio-desc-short-desc {font-size: 13px;}

问题是，.portfolio-project 的宽度似乎不适合内容的高度。注意到第一行元素下方有一条白线。它们是 .portfolio-project 的额外空间。

我做错了什么？几天来我一直在寻找解决方案，但仍然没有找到线索。有人可以帮忙吗？抱歉我的英语不好。

Answer 1

我的猜测是这与通过将图像放入 div 中添加的行有关:

Image inside div has extra space below the image

我为(在找到该主题之前)制作演示的一个解决方案是在父级上使用 line-height: 0 :

http://codepen.io/anon/pen/VveXJJ?editors=110

.portfolio-project {
line-height: 0;
}