如何將所有元素都浮動到左側，並將右側的一個元素顯示在一起以顯示幾個元素？

我們必須顯示爲四個以下的div：
如何將所有元素都浮動到左側，並將右側的一個元素顯示在一起以顯示幾個元素？

|--------|------| 
|Big Area|div 1 | 
|  |------|-------| 
|  |div 2 | div 3 | 
|  |------|-------| 
|  | 
|  | 
|  | 
|  | 
|--------|

我試試這個：

<html><head> 
<style> 
#big_area { 
    float: left; 
    width: 200px; 
    height: 200px; 
} 
#div_1 { 
    float: left; 
    clear: right; 
} 
#div_2 { 
    float: left; 
} 
#div_3 { 
    float: left; 
} 
</style> 
</head> 

<body> 
<div id="big_area">big area</div> 
<div id="div_1">div 1</div> 
<div id="div_2">div 2</div> 
<div id="div_3">div 3</div> 
</body> 
</html>

，但它不工作。當我設置clear:left到div 2我div 2和div 3移動到Big Area以下的場景結束，它不是真的結果
你有什麼解決方案嗎？

謝謝任何人，並感謝你的維尼Animuson。我讀了你的Wiki，它描述我不能在我的情況下使用float:right。然後我試着用另一種方式向你說出問題。

看到我有很多div s（N數div s）不同的寬度和高度。我必須連續顯示這div s。例如象下面這樣：

|-----|-----|-----|-----|-----|-----|-------|-----| 
|Div 1|Div 2|Div 3|Div 4|Div 5| ... |Div N-1|Div N| 
|-----|-----|-----|-----|-----|-----|-------|-----|

我float所有的div s到left，然後所有的人都顯示出一行（在此行中我的相關窗口寬度自動斷開）。但是我肯定需要在一些div之前休息。例如我需要在Div 3之後休息。
然後，我嘗試將clear:left添加到我的div 4，它工作得很好，我的div 4和之後的任何數字（div 5，...，N-1，N）顯示在新行中，但是如果我的div 1有很大的高度像Big Area）我不會讓我的其他div s去Big Area以下，但他們去與clear:left解決方案。見下面的結果：

|-------|-----|-----| 
| Big |Div 2|Div 3| 
| Area |-----|-----| 
|(div 1)| 
|  | 
|-------| 
|-----|-----|-----|-------|-----| 
|Div 4|Div 5| ... |Div N-1|Div N| 
|-----|-----|-----|-------|-----|

，因爲我嘗試div 3後增加<br />標籤，然後div 4和任何其他div年代後感動到新的生產線，但遺憾的是，如下所示：

|-------|-----|-----| 
| Big |Div 2|Div 3|<br /> 
| Area |-----|-----| 
|(div 1)|Div 4| 
|  |-----| 
|  |Div 5| 
|  |-----| 
|  | ... | 
|  |-----| 
|  | N-1 | 
|  |-----| 
|  | N | 
|  |-----| 
|  | 
|-------|

哦，我找到答案.. !!!!!! ：d :)：d/
你可以看到我的回答馬上就到

來源

2012-06-17 Reza Amya

CSS：

#big_area { 
    display: inline-block; 
    float: left; 
    width: 200px; 
    height: 200px; 
    } 

#div_2, #div_3 { 
    display: inline; 
    }

HTML：

<div id="big_area">big area</div> 
<div id="div_1">div 1</div> 
<div id="div_2">div 2</div> 
<div id="div_3">div 3</div>

JSFiddle Link

除非你正在試圖做的更多與它，你不是說，這應該工作得很好。在這種情況下清除是不必要的。除非您將元素指定爲inline或inline-block，否則默認情況下該行將在div_1之後中斷。

來源

2012-06-17 22:55:22 mawburn

你和OP可能希望通過[CSS-浮動標籤維基]閱讀（http://stackoverflow.com/tags/css-float/info）如何清理工程。 – animuson

div_2和div_3可能需要不能應用於內聯元素（寬度，高度，垂直填充等）的樣式。如果需要支持IE7，則使用內聯塊代替IE7不起作用。 –

如果這是一個選項，如果將div 1，2和3放在容器中，這將是一個更簡單的問題。所有div可能除外的div都可以左移。

<div id="big_area">big area</div> 
<div id="small_area"> 
    <div id="div_1">div 1</div> 
    <div id="div_2">div 2</div> 
    <div id="div_3">div 3</div> 
</div>

否則，我認爲您將有一個非常艱難的時間找到一個可靠的，跨瀏覽器的解決方案。如果divs具有固定的高度和寬度，你可能可以用絕對定位來管理某些東西，但這不是一個理想的方法。

來源

2012-06-17 23:13:37

我找到了答案：d
我div 3後我javascript代碼使用的document.createElement像下面添加<br />：

var temp = document.createElement('br'); 
document.getElementById('all_of_div_container').appendChild(temp);

我我的代碼更改爲以下，這是工作，所以這麼好：

document.getElementById('all_of_div_container').innerHTML += "<br />";

這種方式相同的代碼添加到我的HTML，但我不知道爲什麼appendChild(temp)秀人l新的行float:left項目（正如我所說，並在我的問題中畫出）......！
反正innerHTML工作得很好。

感謝
玩得開心;）

來源

2012-06-18 09:36:41

如何將所有元素都浮動到左側，並將右側的一個元素顯示在一起以顯示幾個元素？

回答

相關問題