左側內容切入右側浮動內容

在屏幕截圖中，您會看到左側（未浮動）和右側顯示框（浮動）的項目列表。如何防止左側物品的li元素切入顯示框。 li內容遵循流程並在運行到顯示框之前切換到新行，但li元素（如容器中）不會。左側內容切入右側浮動內容

Left div cuts into right div

左側

李項：

border: 1px solid #000000; 
display: block; 
margin-bottom: 8px; 
padding: 10px;

顯示框右邊：

border: 3px double #000000; 
display: inline-block; 
float: right; 
margin-left: 20px; 
padding: 15px; 
width: auto;

感謝，瑞安

後ROBERT的建議：

Adding inline-block to li element

響應TIM乙

寬度是動態的，在不同的頁面，動態的每頁不同，但他們不會改變在每個頁面的基礎上，除這些元素超出了展示箱的範圍。就像當您將圖片浮動到左側並且文本位於圖片右側時一樣，但一旦圖片結束，文本就會一直延續到圖片下方，一直到頁面的右側邊緣，這就是我想要的。所以我想讓li元素去到右邊顯示框的左邊緣，但是通過框，我想去頁面的邊緣。文本本身符合這一點，但由於某種原因，李元素不認爲有一個「對象」，以防止它停止並切入顯示框。它不識別它的原因是因爲正確的浮動顯示框，它將正常流程中的東西打破，但我認爲必須有一種方法來操縱顯示框，以便它可以被識別或操縱li元素，以便他們可以識別顯示框。

來源

2010-09-20 NightHawk

評論消失了，但Robert建議在li元素中添加內聯塊。這沒有用。尋找更多的投入！謝謝，瑞安。 – NightHawk 2010-09-20 22:25:30

順便說一句，我知道我可以限制ul/li的大小，但我有不同大小的顯示框，所以我非常希望找到一個靈活的解決方案，我不必手動輸入寬度。 – NightHawk 2010-09-20 22:29:07

刪除它是因爲我誤解了這個問題。它會使它適合其內容，但這不是你所需要的。 – Robert 2010-09-20 22:31:12

如果你浮動一個元素而不是其他人，那麼你會遇到這些問題。嘗試浮動ul元素，並給出項目的寬度。

來源

2010-09-20 22:30:40

我當然可以漂浮ul元素，但是我不想給ul/li元素一個寬度的原因是因爲（1）雖然它們在每個頁面上的寬度相同，但我有幾個頁面將需要ul/li寬度不同。我曾考慮在每頁基礎上覆蓋樣式，但這留下了問題（2），這是因爲某些顯示框的寬度很大，理想情況下我希望將內容移動到頁面的右邊緣更多的內容填入一行），否則我會有一個長期不平衡的頁面 - 這是否有道理？ – NightHawk 2010-09-21 13:42:07

設置寬度使用jQuery是一個選項？假設您要獲取顯示框的寬度，然後計算ul> li元素的寬度？由於腳本關閉的人不會看到正確的佈局，因此不是理想的解決方案。 – 2010-09-21 13:47:13

問題（2）如果我設置了寬度，一旦li元素低於它就不會纏繞顯示框？我想我也可以獲得高度並在那裏進行一些計算，但是這似乎有很多邏輯來實現文本內容自然而然地做的事情，只是容器不會相應地流動。我更喜歡純粹的CSS解決方案，但它可能不可能？！ – NightHawk 2010-09-21 14:13:54

如果您知道右列的最大寬度是多少，您可以添加margin-right：00px;到列表項或列表本身。

來源

2010-09-21 08:34:57 Robert

右欄（顯示框）根據內容的類型改變寬度。 – NightHawk 2010-09-21 13:36:10

所以右列寬驅動左列寬？ – ph33nyx 2012-07-23 20:29:52

@ ph33nyx是的，它的確如此。 – NightHawk 2012-07-25 03:16:07

由於文本是做你想做的，但不是包含它的LI，所以我在考慮將LI作爲塊級元素呈現（http://htmlhelp.com/reference/html40/block.html）。嘗試將其設置爲顯示：inline-block。

來源

2012-07-23 20:37:00 ph33nyx

確實，它被設置爲'display：block'，但將其更改爲'display：inline-block'會將'li'移動到顯示框下方，如上圖所示。 – NightHawk 2012-07-24 03:49:45

左側內容切入右側浮動內容

回答

相關問題