圖像溢出修復？

我有兩列;第一列是圖像，第二列是細節。圖像溢出修復？

我的問題是圖像溢出到下一行

添加溢出：auto;或內聯塊;到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; 
}

來源

2012-12-04 kuruvi

這看起來像一個_table_的工作可疑。 – Kyle

似乎表格。您可能還想更改在包裝器元素上設置的高度。如果這是'min-height'，而你爲這個元素添加一個像overflow = hidden這樣的clearfix，我希望它能工作 – lnrbob

而且我上面的評論：http://jsfiddle.net/hp7dY/

只是min-height似乎足以解決這個問題

來源

2012-12-04 14:20:13 lnrbob

它看起來像你的DIV組織有點困惑，這是增加你的問題。我假設portfolioitems_wrap DIV應該包含這兩列。也就是說，問題更多的是你正在修復每個表格行的高度，而不是根據內容來靈活調整。

移除高度：1.5em;通過輸入可以讓你的元素適合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; 
}

下面是與其他一些小的調整工作撥弄讓它非常：

希望有所幫助。

來源

2012-12-04 14:54:26 PRB

圖像溢出修復？

回答

相關問題