防止浮動包裝沒有設置父寬度

我想有幾個項目水平無限（一行）堆疊，而不設置其父容器的寬度。我完全知道，將容器div設置爲寬度：1000px;會讓他們堆疊，但由於各種原因，我不想使用這個解決方案。有沒有其他的選擇？防止浮動包裝沒有設置父寬度

<html> 
<head> 
<style type="text/css"> 
div {white-space:nowrap; clear:none;} 
div div {width:300px; border:1px solid black; float:left; display:inline;} 
</style> 
</head> 
<body> 
<div> 
    <div>x</div> 
    <div>x</div> 
    <div>x</div> 
    <div>x</div> 
    <div>x</div> 
    <div>x</div> 
</div> 
</body> 
</html>

來源

2010-05-19 Matrym

你不需要'在你給實現堆疊的例子float'那些'div's。如果你真的想'浮動'，那麼你可以嘗試給每個div應用'clear：left'。 – ground5hark 2010-05-19 15:36:04

這不一定是一個強大的解決方案，但如果你能在每個內部的div得到完全300像素的內容，你可以刪除浮動和寬度屬性。也許包括1x300透明圖像，並確保你沒有太多的文字？也許

div.dummycontent {float:left; width:200px; background-color:Blue; } 
<div class="dummycontent">&nbsp;</div>

或者，如果不設置寬度主要沿不知道，直到運行時的線什麼的大小將需要的，也許用JavaScript計算，並設定它，然後原因是什麼？

來源

2010-05-19 16:06:16 joelt

display: inline; 
    white-space: nowrap; 
    float: none;

和父元素，你需要

overflow:hidden;

來源

2012-11-15 01:05:06 deweydb

防止浮動包裝沒有設置父寬度

回答

相關問題