CSS是否可以停止包圍浮動塊的文本塊塊？

我的問題是我有一個頁面，有很多段落，高度在2到20行之間。CSS是否可以停止包圍浮動塊的文本塊塊？

可以有任何數量的段落，每個段落都有。

使用HTML5，CSS3，

我最初的目標是將圖片添加到這個格式浮動左右，與文字環繞四周，這是很容易做到。

但現在，客戶想要那套有關圖像的底部，以保持一致，嘗試段落，例如：

（參考下面的項：### =圖像空間/形狀/內容）

SO：發生的事情是：

####### <p>text text here for this paragraph 
###I### text here for this paragraph line 2 
###M### text here for this paragraph line 3</p> 
###A### 
###G### <p>text here for paragraph 2 
###E### text here for paragraph 2, line 2, etc</p> 
####### 
####### <p>text here for paragraph 3 line 1 
text here for paragraph 3 line 2, 
etc etc. </p> 

...

但是：我想實現的是做一個動態的CSS方式：

####### <p>text text here for this paragraph 
###I### text here for this paragraph line 2 
###M### text here for this paragraph line 3</p> 
###A### 
###G### <p>text here for paragraph 2 
###E### text here for paragraph 2, line 2, etc</p> 
####### 
####### <p>text here for paragraph 3 line 1 
     text here for paragraph 3 line 2, 
     etc etc.</p> 

<p>text here for Paragraph 4 states not indented to 
make room text for the image floated left. text. 
text text text text</p> 

....

由於第3段中的P標記始於圖像仍然存在時，整個段落應該縮進，是否存在實現此目的的相當動態的方式？

如果我在CSS中爲段落標籤應用任何縮進規則，它們還會縮進段落4中沒有左側圖像的段落。

如果我使段落標籤內嵌塊，我讀作爲另一個類似問題的解決方案，所以整個段落不會出現，直到圖像後，打破頁面流。

如果我不漂浮圖像什麼是內聯的最佳方式？我無法保證頁面上的圖像數量。

我不能在圖像元素的底部添加空格，例如填充或邊距，因爲我不知道段落會持續多長時間。

進一步澄清：我的圖像目前是漂浮的，並且完美地工作。

聲明：我有些累了。晚了。但我想如果這個問題有一個簡單的答案，它可能對別人和我自己有用，並且明天早上可以節省我幾個小時的挖掘時間......

PS - >我找不到解決方案的失敗可能是我的無能簡明扼要地描述我的問題，如果對這個問題有簡要的描述，請告訴我！乾杯。

來源

2014-09-26 Martin

棒用於圖像的容器和它漂浮到左邊。粘貼文本的容器並將其浮動到右側。 – melancia 2014-09-26 22:26:32

嘗試使用浮動div右側的段落標籤，MelanciaUK和文本現在出現在圖片下方。不是一個解決方案，抱歉。 – Martin 2014-09-26 22:28:31

創建一個'jsFiddle'向我們展示一些例子。 – melancia 2014-09-26 22:30:25

如果將overflow: auto添加到p元素，它們將形成新的塊格式上下文，並且它們的內容將被限制在段落的邊界框的邊緣。

img { 
 
    float: left; 
 
} 
 
p { 
 
    width: 170px; 
 
    overflow: auto; 
 
    }

<img src="http://placehold.it/100x180"> 
 
<p>text here for paragraph 3 line 1 
 
    text here for paragraph 3 line 2, 
 
    etc etc. </p> 
 
<p>text here for paragraph 3 line 1 
 
    text here for paragraph 3 line 2, 
 
    etc etc. </p> 
 
<p>text here for paragraph 3 line 1 
 
    text here for paragraph 3 line 2, 
 
    etc etc. </p> 
 
<p>text here for paragraph 3 line 1 
 
    text here for paragraph 3 line 2, 
 
    etc etc. </p>

來源

2014-09-26 22:34:45

賓果！溢出自動修復它完美，謝謝馬克！ – Martin 2014-09-26 22:36:51

太棒了！晚安！ – 2014-09-26 22:38:27

CSS是否可以停止包圍浮動塊的文本塊塊？

回答

相關問題