如何使用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;
}