0

我有两列；第一列是图像，第二列是细节。

我的问题是图像溢出到下一行

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

列表 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;
}
4

2 回答 2

0

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

似乎min-height足以解决这个问题

于 2012-12-04T14:20:13.877 回答
0

看起来您的 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/

希望有帮助。

于 2012-12-04T14:54:26.677 回答