圖像可以在浮動元素旁邊流動文本嗎？

我正試圖找到一個簡單的解決方案來解決以下問題而不使用JS。圖像可以在浮動元素旁邊流動文本嗎？

<div class="wrap"> 
    <p>[...]</p> 
    <div class="mpu"></div> 
    <img src="img-src"> 
    <p>[...]</p> 
</div>

我有一類.wrap一個充滿文本div容器。在這裏面，我有一個300px的正方形div，一個.mpu類將顯示廣告。廣告單元出現的文字段落之間，並應用了以下樣式：

.mpu{ 
    display: inline-block; 
    float: right; 
    width: 300px; 
    height: 300px; 
    margin: 1em -2em 1em 1em; 
}

我也有一個適當的標準片斷迫使圖像一定寬度下，與視口調整：

img{ 
    max-width: 100%; 
    height: auto!important; 
}

因此.mpu廣告單元浮動到右側，但由於margin-right負面因此也會從.wrap容器的右側邊緣伸出2em。容器內的文本在整個廣告塊周圍流暢地流動，但是，當圖像標記插入廣告塊旁邊時，會在圖像出現在其下方時創建一個空白區域。

是否有可能強制圖像在浮動元素周圍流動，就像文本一樣？我知道廣告單元應用了浮動廣告，因此已從文檔流中移除，因此圖片被設置爲其父元素寬度的100％，即.wrap的寬度。有沒有解決方法或呃...＆hellip;一個黑客來覆蓋這種行爲？

請參考下面搗鼓了工作演示：https://jsfiddle.net/7z0yypw1/

來源

2015-05-27 Jack F

https://jsfiddle.net/7z0yypw1/2/類似的東西？ –

Img必須小？或者？ –

啊，應該提到：圖像將由編輯人員通過CMS添加，他們可以在文檔的任何位置插入圖像，因此解決方案需要適用於廣告單元旁邊不會出現的圖像（即伸展到容器的整個寬度）以及那些。 –

我認爲你正在嘗試做的是這樣的：https://jsfiddle.net/7z0yypw1/6/

包裝在包裝元素的IMG，並給它一個類imageWrapper。然後應用

.imageWrapper { 
    display:block; 
    overflow:hidden; 
}

來源

2015-05-27 19:14:49 Alohci

是的！我甚至不知道這是如何工作的，但這是解決方案，謝謝！你能解釋爲什麼在父元素上設置「overflow：hidden」強制圖像調整大小嗎？ –

CSS 2.1規範對此非常模糊，而且似乎有些副作用。圍繞浮點的文本非常難以實現溢出值而不是可見的，所以爲了避免這些問題，這些導致塊元素形成新的塊格式上下文。這些定義是爲了避免漂浮物 - 就像線盒一樣 - 將寬度減小到剩餘空間。事實上，CSS 2.1只是將它作爲一個選項，並不需要瀏覽器來完成，但似乎這是所有現代瀏覽器都採用的選項。請參閱http://www.w3.org/TR/CSS2/visuren.html#bfc-next-to-float – Alohci

我會使圖像浮球隨圖像周圍一個不錯的利潤率。這裏是代碼：

img { 
    height:auto; 
    max-width: 100%; /* set to what you want */ 
} 

.newimageclass { 
    float:left; 
}

希望幫助！

來源

2015-05-27 16:50:59 jamescampbell

圖像可以在浮動元素旁邊流動文本嗎？

回答

相關問題