行斷功能類似於CSS

柱斷我有一個是動態創建的一系列主要DIV中的div，結果是像下面行斷功能類似於CSS

<div id="main_div"> 
    <div class="subdiv" style="width: 200px"> </div> 
    <div class="subdiv" style="width: 400px"> </div> 
    <div class="subdiv" style="width: 900px"> </div> 
    <div class="subdiv" style="width: 100px"> </div> 
    <div class="subdiv" style="width: 200px"> </div> 
    <div class="subdiv" style="width: 300px"> </div> 
    <div class="subdiv" style="width: 20px"> </div> 
    <div class="subdiv" style="width: 600px"> </div> 
<div/>

我想打破如果總一個div寬度超過容器的寬度。

這

|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾container‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾| 
|                  | 
|‾‾‾‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾| 
| subdiv1 |  subdiv2  |  subdiv3         | 
|______________|____________________|__________________________________________________| 
|                  | 
|                  | 
|______________________________________________________________________|

將成爲這樣：

|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾container‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾| 
|                  | 
|‾‾‾‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾| 
| subdiv1 |  subdiv2  |  subdiv3 - first part  | 
|______________|____________________|__________________________________| 
|                  | 
|                  | 
|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|            | 
| subdiv3-remaining  |            | 
|________________________|            | 
|                  | 
|______________________________________________________________________|

使用列數和列斷特性，你可以這樣做，但垂直。檢查我的example。

我想這樣做水平。有什麼建議麼？

來源

2013-01-15 Cihad Turhan

你要保持你的列布局但它像換行？ – matthewpavkov

'display：inline'是你的情況的一個選項嗎？（[示例]（http://jsfiddle.net/mSdMW/））雖然有一些缺點。 – Jeroen

有趣，但它工作正如我想。謝謝。編輯：等待！我在div裏沒有任何文字。因此，它不會工作:( –

#main-div { overflow:hidden; } 
.subdiv { float:left; }

來源

2013-01-15 14:37:03 Lowkase

如果有必要，我想把div分成兩份，但這不是。 –

行斷功能類似於CSS

回答

相關問題