Question

我有两列;第一列用于图像，第二列用于保存细节。

我的问题是流向下一行的图像

添加溢出：自动;或内联块; div.portfolioitems_wrap没有帮助我

list http://img577.imageshack.us/img577/7002/screenshot20121204at135.png

设备

 <div class="portfolioitems_wrap">
 <div class="portfolioitems_column1">first image</div>
 </div>
 <div class="portfolioitems_column2">information of the institute</div>
 <div class="portfolioitems_wrap">
 <div class="portfolioitems_column1">first image</div>
 </div>
 <div class="portfolioitems_column2">information of the institute</div>
 <div class="portfolioitems_wrap">
 <div class="portfolioitems_column1"><img src="/image/nature.jpg" class="thumbnail" alt="nature" />
 </div>
 </div>
 <div class="portfolioitems_column2">information of the institute
 </div>
 <div class="portfolioitems_wrap">
 <div class="portfolioitems_column1">first image</div>
 </div>
 <div class="portfolioitems_column2">information of the institute</div>
 <div class="clear"></div>

CSS

 div.portfolioitems_wrap{
float: left;
width:100%;
color:#555555;
border-bottom: 1px solid #eee;
height: 1.5em;
margin-bottom: 1em;
}

 div.portfolioitems_column1{
margin-right: 10px;
}
 div.portfolioitems_column2{
float: left;
color:#555555;
width: 300px;
margin-left: -300px;
font-size: 80%;
}

 div.portfolioitems_column1 .thumbnail 
{
    float:left;
    margin-right:20px;
    border:1px solid #979390;
    width:80px;
    margin-bottom: 5px;
}


 div.clear{
clear: both;
}

Answer 1

继上面我的评论：http://jsfiddle.net/hp7dY/

只有min-height似乎足以解决此问题

Answer 2

看起来您的DIV组织有点困惑，这会增加您的问题。我假设portfolioitems_wrap DIV应该包含两个列。也就是说，问题更多的是你正在修复每个表行的高度，而不是根据内容允许它灵活。

去除高度：1.5em; entry from允许您的元素适合DIV。您还可以考虑将列元素显示为内联块。

div.portfolioitems_wrap{
    float: left;
    width:100%;
    color:#555555;
    border-bottom: 1px solid #eee;
    // height: 1.5em;
    margin-bottom: 1em;
}   

div.portfolioitems_column1{
    margin-right: 10px;
    display:inline-block;
    width:100px;     
    float:left;
}  

div.portfolioitems_column2{
    color:#555555;
    font-size: 80%;
    display:inline-block;
    width:300px;
    float:left;
}   

div.portfolioitems_column1 .thumbnail  {     
    float:left;     
    border:1px solid #979390;     
    width:80px;     
    margin: 0px 10px 5px 10px;
}    

div.clear{
    clear: both;
}

这是一个工作小提琴，其他一些小调整使它漂亮：

http://jsfiddle.net/72HML/

希望有所帮助。

图像过流修复？

2 个答案: