CSS：當添加內容時，nowrap div的小孩div會變得很瘋狂

我試圖做一個佈局，我有一個Div，它以動態方式添加其內容。我希望這個「父」div有一個固定的高度，當它的內容添加div根據需要水平增長。CSS：當添加內容時，nowrap div的小孩div會變得很瘋狂

這是我用來隔離問題的測試HTML。

<html> 
<head> 
    <link rel="stylesheet" href="styletest.css" /> 
</head> 
<body> 
    <div style="width:700px;overflow:auto"> 
    <div class="anio"> 
     <div class = "semestre"> 
     <div class="floater"></div> 
     <div class="floater"></div> 
     <div class="floater"></div> 
     <div class="floater"></div> 
     <div class="floater"></div> 
     <div class="floater"></div> 
     <div class="floater"></div> 
     </div> 
    </div> 
    </div>  
</body> 
</html>

在這裏，我有7周class=floater的div進入這應該爲我添加更多class=floater的div到水平增長class=semestre div容器。所有這一切都與overflow-x:auto進入一個固定的寬度格。

與CSS一番激戰後，我所管理的以下內容：

div.floater { 
    margin: 4px; 
    width: 110px; 
    height: 82px; 
    border: 1px solid #ccc; 
    display: inline-block; /*this to make the floaters go horizontal*/ 
} 
div.semestre{ 
    white-space: nowrap; /* this avoid the floater overflowing under the parent div*/ 
    margin-top: 5px; 
    margin: 2px; 
    height: 90px; 
    border: 1px solid #ccc; 
    min-width:98%; 

} 
div.anio{ 
    margin : 2px; 
    border: 1px solid #ccc; 
    min-width:98%; 

}

所以這worked..kind的..在class=floater的div去水平，並導致overflow-x的在最外面的DIV激活，但包含class=floater div的容器div不會像我認爲的那樣增長（這可以通過邊界看不到增長）。谷歌搜索後，我發現了一些建議的解決方案，如在min-width: css屬性的頂部添加width:auto或將其浮動，但沒有任何工作。這是一個小問題，因爲邊界只是用於格式化。

我遇到的市長問題是當我嘗試將內容添加到class=floater divs時，他們只是瘋狂而不會留在他們應該（當他們沒有內容時）的地方。我試圖通過將white-space:normal添加到浮動類來恢復white-space:nowrap，但那不起作用。之後，我只是瘋了，開始嘗試隨機的東西，並設法解決我的第一個問題，但我忘了我做了什麼，並回到第1步D :.

說實話，我很新的HTML/CSS，我正在學習幹。所以，如果這個問題已經被問及/相信我，我已經找到了它。也請原諒我的英語，盡我所能。

謝謝你的時間。

編輯：根據要求，小提琴：D http://jsfiddle.net/UBYKy/1/ 那裏你可以看到我的兩個問題。

編輯2：我相信我已經找到了解決這兩個問題的方法。對於第一個問題，我通過將display: inline-block添加到父div中解決了問題，第二個問題我將vertical-lign:top添加到了浮動類css中（如afshin建議的那樣），它工作得很好。我希望這可以幫助任何人有同樣的問題。

來源

2012-09-22 Thejazz

你最好別在http://jsfiddle.net你的問題的一個活生生的例子，在這裏貼的鏈接，人們這樣會更願意幫助你。 – Nelson

我認爲你應該使用這個

div.floater { 
vertical-align:top; 
margin: 4px; 
min-width:110px; 
width: auto; 
height: 82px; 
border: 1px solid #ccc; 
display: inline-block; /*this to make the floaters go horizontal*/ 
}

DEMO

來源

2012-09-22 18:31:04 Afshin

CSS：當添加內容時，nowrap div的小孩div會變得很瘋狂

回答

相關問題