左邊的圖像浮出格

我已經將文字與圖像結合起來了，不過貓會離開父div。有什麼方法可以解決它嗎？左邊的圖像浮出格

<div style="border:1px solid #CCCCCC"> 
    <img style="float: left;" src="http://placekitten.com/g/200/200" height="100px" width="100px" border="1px"/> 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
</div>

來源

2013-08-12 monjevin

文本後添加此<div style="clear:both;"></div>

Demo

來源

2013-08-12 10:52:16

謝謝，那個作品 – monjevin

所以把它投票，我認爲你把我投下來錯了:) –

我沒有足夠的聲望投票上/下... – monjevin

做不添加空元素的一種方式：

添加這個CSS

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
.clearfix { display: inline-block; } 
/* start commented backslash hack \*/ 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 
/* close commented backslash hack */

和類clearfix添加到您的div

<div style="border:1px solid #CCCCCC" class="clearfix"> 
    <img style="float: left;" src="http://placekitten.com/g/200/200" height="100px" width="100px" border="1px"/> 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

</div>

http://jsfiddle.net/qn5LM/11/

來源

2013-08-12 10:46:48

不要添加額外的元素。有許多更好的方法來獲得相同的效果。 – Quentin

然後與我的其他divs錯位 – monjevin

@ Ms.Nobody - 因爲這是一個重複的問題，我投票把這個關閉並標記爲這樣。 – Quentin

添加float:left於母公司的股利以及

DEMO

添加overflow:auto於母公司的股利

來源

2013-08-12 10:48:07 Sowmya

正確的方法是添加overflow: hidden的風格的外部股利。請參閱jsFiddle

<div style="border:1px solid #CCCCCC; overflow: hidden"> 
    <img style="float: left;" src="http://placekitten.com/g/200/200" height="100px" width="100px" border="1px"/> 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
</div>

來源

2013-08-12 10:48:37

當您將浮動元素從文檔的普通流中提取出來時。

應用overflow：hidden;到父元素是一個快速解決這個問題的方法。

請看一看clearfix瞭解更多信息：

http://css-tricks.com/snippets/css/clear-fix/

請注意：

溢出：隱藏;也隱藏溢出，這在某些情況下可能是不受歡迎的行爲。

來源

2013-08-12 10:49:45

只需添加位置：絕對到div ...

<div style="border:1px solid #CCCCCC; position:absolute;"> 
    <img style="float: left" src="http://placekitten.com/g/200/200" height="100px" width="100px" border="1px"/> 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
</div>

來源

2013-08-12 11:27:01

左邊的圖像浮出格

回答

相關問題