行断功能类似于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

回答

相关问题