P標籤內容在浮動圖像下出血

我有一個列表，每個李有一個圖像，然後一些文本。P標籤內容在浮動圖像下出血

<div style="width:500px;"> 
<ul > 
    <li> 
     <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTyBPzjBIU0gCSFH7mLEVMuQ6d69KYfe14YCsJcLXCbHzhqJZ2p" width="100px" style ="float:left; "> 

     <p>First line......<br/>Second: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p> 
    </li> 

</ul> 
</div>

的問題是：如果p內容超出圖像的高度，它流向左，圖像下。我怎樣才能阻止呢？我在圖像下面什麼都沒有（每個<li>）。

感謝

來源

2013-01-03 aVC

這就是'float'的全部要點。 –

寬度你可以添加一個左邊距到您的p元素：

li p { 
    margin-left: 105px; /* width of your images */ 
}

DEMO

來源

2013-01-03 21:33:25

它做到了。 Thx :) – aVC

而不是浮動的圖像，你可以浮在p標籤權，並給它的400像素

來源

2013-01-03 21:30:23 chrisbulmer

只需在段落中留一點餘量。像這樣p{margin-left:105px;}工作示例http://jsfiddle.net/xSbmn/

保持img向左浮動，並向段落添加等於或大於img的邊距。

來源

2013-01-03 21:36:09

您可以向左浮動，寬度爲100px的圖像並向右浮動寬度爲400px的邊框。

否則，創建一個css文件，插入樣式，而不是將它寫在html上是非常有效的。

來源

2013-01-03 21:36:16 jbr

設置overflow: hidden;上的P標籤。這種方法的好處是你不需要知道圖像標籤的寬度。

li p { 
    overflow: hidden; 
}

見demo。我在圖像和段落文本之間添加了5個像素的空白區域，儘管這是可選的。

來源

2013-01-03 22:09:11 thirdender

哇。那真好;那真甜。我以前從來沒有見過。 –

P標籤內容在浮動圖像下出血

回答

相關問題