如何使用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中而添加的一行有關：

div中的圖像在圖像下方有多余的空間

我進行演示的一種解決方案（在找到該主題之前）是在父級上使用line-height: 0 ：

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

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