浮動流體圖像留下了文字環繞

沒有理由這應該很難實現。回來的路上，您可以創建一個表格，並將圖像放在第一個單元格上，將文本放在第二個單元格上。易如反掌。浮動流體圖像留下了文字環繞

由於某種原因，我有一個時間讓這與CSS工作，我知道css很流利。我確信我只是忽略了一個很容易的答案。

我正在尋找實現：

動態尺寸（從數據庫中拉）圖像向左浮動 - 說明文字下面圖片進行包裝，當它到達圖像高度的權利。

什麼行不通：

設置保證金，留在文本（圖像的寬度不一致）
設置寬度/浮動權上的文字（同樣，圖像寬度上文本動態的，所以適當的寬度將是未知的）

示例代碼（預CSS）：

<div class="demo"> 
    <img src="dynamic_sized_image.jpg" /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div>

希望有一個答案！

謝謝！

來源

2011-09-21 rkingon

這是解決您的問題（p { overflow: hidden}）

http://jsfiddle.net/simoncereska/BnQRW/

來源

2011-09-21 05:50:47 simoncereska

Holy Moly我不能相信這是那麼容易......我知道我錯過了一些東西。謝謝SOOO很多..我希望我可以投票，但我需要更多的代表點=/ – rkingon

嗨，所以呃，想知道如果你能解釋爲什麼這有效嗎？它沒有任何意義..嗯 – rkingon

這可以工作，但它不允許文本垂直居中在圖像上，或圖像垂直居中文本（取決於哪個更高）。真正的恥辱是可靠地垂直居中的唯一方法是使用表格。 – cjbarth

我不認爲這是可能的純CSS，因爲你有一個屬性是動態的。

使用javascript計算img寬度，然後您可以找出文本的寬度（只要#demo容器是固定大小）。通過js設置寬度並使用此css：http://jsfiddle.net/GcV3S/

來源

2011-09-21 05:32:58 marissajmc

溢出：隱藏的是答案！我不能相信那工作... – rkingon

所以把它標記爲正確的答案;） – simoncereska

最簡單和最好的方法就是設置固定的圖像大小。只是擴大這些，這將大多數情況下改善您的網站的佈局和外觀。如果你確實需要這樣做，而沒有爲文本塊或圖像塊設置固定寬度，我現在還不知道答案，對不起。

我現在能想到的唯一方法就是使用javascript來改變文本的寬度......無論是一個有趣的問題。

來源

2011-09-21 05:45:12 JNDPNT

我在使用java辯論 - 甚至在cms中存儲圖像寬度，然後提供內聯css ...但它似乎有一種方法...溢出：隱藏;在文本上。有效！ – rkingon

浮動流體圖像留下了文字環繞

回答

相關問題