如何顯示：塊;元素環繞浮動元素像文字會？

我已經做了一些谷歌搜索，並找到了一些我想解決的問題的參考，但都提出了同樣的解決方案，我不能使用。問題是，我有一個側邊欄右側浮動，一些div需要擴展到側邊欄剩下的寬度，但是當側邊欄不再阻止它們這樣做時，然後展開爲全寬度。如何顯示：塊;元素環繞浮動元素像文字會？

的的jsfiddle是在這裏：http://jsfiddle.net/qdk3n/

其他地方找到的解決方案是應用overflow: hidden;到.left項目。這實現了我想要的效果：與邊欄共享水平空間的div只擴展到側邊欄，但額外的div擴展到完整的允許寬度。不幸的是，如果我申請overflow: hidden;，那麼在左側div中會有一個絕對定位的項目，它會超出div的大小，所以我不能使用它。有沒有什麼辦法可以完成我想要做的事情，而不使用overflow: hidden;？

注：我不知道頁面渲染時間之前的側邊欄或任何左側div的大小，我不能以任何方式，形狀或形式使用JavaScript（因爲這是爲了JS禁用的用戶）。我可以設置的唯一維度就是邊欄的寬度;該divs需要流暢，我不能任意選擇其中的一些數字來擴展部分路徑。

另請注意：我看到這個：Div stretch then wrap around other floated div。這正是我想要做的，但唯一真正的解決方案是overflow: hidden;屬性，我不能使用它。

來源

2012-05-12 Scott R

你能否提供更多關於「將會有一個絕對定位的物品在左邊divs裏超過div大小」的細節？理想情況下，一個例子。 – thirtydot

查看jsfiddle並將'overflow：hidden;'添加到'.left' CSS。結果的效果正是我想要發生的情況，除了我也不需要隱藏溢出的內容...所以我不能真正使用'overflow：hidden;' –

這有什麼問題嗎？ http://jsfiddle.net/thirtydot/qdk3n/54/ – thirtydot

除非我錯過了什麼，我不認爲有可能實現你所要求的。

原因overflow: hidden;改變了（display: block;）元素的行爲是一種叫做「塊格式化上下文」的東西，你可以在這裏閱讀;

https://developer.mozilla.org/en/CSS/block_formatting_context http://www.communitymx.com/content/article.cfm?cid=6BC9D

從技術上講，你可以保留的元素display: block;，讓他們尊重浮動欄，浮動你的左邊的div以及，但這不可能有你想要的效果。

但是，左側divs中的任何內聯內容都會尊重浮動側邊欄，所以我並不認爲需要divs像您描述的那樣行事（也許請詳細說明您背後的原因以獲得更具建設性的內容反饋）。

來源

2012-05-12 01:24:10 xec

左浮動的div具有我不想在側欄下面延伸的樣式。我希望左側的浮動div能夠保持自己的風格，並讓側邊欄保持自己的風格;像邊界和背景之類的東西需要留在他們分配的水平空間內。我知道_why_'溢出：隱藏;'的作品，但我希望有一個替代品。 –

如何顯示：塊;元素環繞浮動元素像文字會？

回答

相關問題