如何停止允許內容溢出的容器div？

好，見效快虛構的例子：如何停止允許內容溢出的容器div？

<div style="background: #CCC; margin: 10px;"> 
<div style="width: 50%; height: 400px; background: #FFF;">Child #1</div> 
<div style="width: 600px; height: 400px; background: #999;">Child #2</div> 
</div>

如果我調整瀏覽器以小於600px的寬（子＃2），我怎麼可以保持在收縮到瀏覽器窗口（和收縮的孩子停止父DIV在這個過程中＃1）。

從本質上來說，我怎樣才能防止一個容器div在收到最大的孩子時不再收縮呢？

內容是動態的，所以不能指定子節點的寬度，我只是設置子節點＃2的寬度來說明問題。這是相同的，如果有任何特定寬度的元素（例如圖像或完全縮小的表等）

來源

2010-02-08 Leo

我不是100％確定你想要做什麼，你的網頁允許外部元素擴大和縮小但強迫內臟設置大小，但我建議的第一件事是設置外部div的min-width css屬性。你將遇到的問題是，你現在已經在兩個不同的地方指定了相同的值（對於css2來說，這只是一種生活方式）。

據我所知，沒有css屬性將父級的寬度限制爲其子級大小。如果這個功能是絕對必要的，你可以用一個表替換外部div，但重新評估你的設計可能是一個更好的主意。也許如果你能夠詳細說明爲什麼這是必要的，我們可以進一步提供幫助。

根據您的意見，你可以嘗試這樣的事：

<html> 
    <head> 
    <title>Hi</title> 
    </head> 
    <body style="margin: 0; padding:0;"> 
    <table style="background: red;padding:100px;width:100%;" cellspacing="0"><tr><td> 
    <table style="background: #CCC; width:100%;border:none;" cellspacing="0"><tr><td> 
     <div style="width: 50%; height: 400px; background: #FFF;">Child #1</div> 
     <div style="width: 600px; height: 400px; background: #999;">Child #2</div> 
    </td></tr></table> 
    </td></tr></table> 
    </body> 
</html>

您必須嵌套表的原因是因爲外面的表，您可以控制的，否則這將是HTML保證金/填充或身體標籤。當您將邊距應用於正文時，它不會影響頁面的寬度，並且最終會在底部顯示滾動條。嵌套表格並讓外部表格使用填充模擬它可以解決問題。（其他人可能會想出一個更優雅的解決方案）

這就是說，如果你的容器div只是設置背景顏色，你可以設置屏幕的背景顏色。如果您的網頁是正確的（我的設計師朋友會爲我拍攝的東西），瀏覽器窗口將爲您處理效果。

來源

2010-02-08 15:13:55

基本上這是一個簡單的容器div，它包含了該網站的所有主要內容。我不希望這個容器div比它裏面最寬的元素（無論可能是什麼）縮小。允許這將進一步減少可變寬度的容器內的其他元素。如果你使用C＆P這個html並在瀏覽器中試用它，我不希望淺灰色比深灰色更深（但我不知道在任何一種特定情況下深灰色的寬度可能會如何）。 – Leo

我猜我正在問一些更長的內容：「你能解釋爲什麼在你的情況下讓容器調整大小，而部分內容是固定的時候重要嗎？」。我知道你在做什麼，但是如果我明白你要做的是什麼，那麼可能會有更好的辦法。 –

想象一下標準的左側菜單/右側內容場景。放在內容中的東西是多種多樣的，沒有辦法以受控的方式（動態內容）告訴它裏面的內容。所以我試圖讓容器沒有任何內容溢出。我不想隱藏溢出，我只是不希望容器從其最大的孩子中縮小，如果這是有道理的話。所以基本上，你必須橫向瀏覽瀏覽器才能看到它（比如說一個大圖片）。實際上，我想爲容器設置一種最小寬度，取決於它是最不知名的最寬的孩子。 – Leo

受NickLarsen深思熟慮的完整答案的啓發：在您的容器上試用display: table-cell。

來源

2010-02-08 15:24:42 graphicdivine

這裏的問題是，這將不允許容器比最大的孩子擴大。這也不會在ie7/6中工作。 – Leo

如何停止允許內容溢出的容器div？

回答

相關問題