5

我对嵌套 div 的换行行为有疑问。我试过搜索这个，但无济于事，因为这个问题很难用语言表达。

我有四个嵌套的 div，如下所示，都带有显示内联块：

-------- ---------------------------
| menu | | content holder div      |
| div  | | ----------- ----------- |
|      | | | content | | content | |
|      | | | div 1   | | div 2   | |
|      | | |         | |         | |
-------- | ----------- ----------- |
         ---------------------------

现在，菜单 div 和内容 div 具有灵活的宽度，这取决于加载的数据。当任一内容 div 变得太宽时，我希望发生以下情况：

-------- ----------------------
| menu | | content holder div |
| div  | | -----------        |
|      | | | content |        |
|      | | | div 1   |        |
|      | | |         |        |
-------- | -----------        |
         | ------------------ |
         | | content div 2  | |
         | |                | |
         | |                | |
         | ------------------ |
         ----------------------

但相反，我得到以下信息：

--------
| menu |
| div  |
|      |
|      |
|      |
--------
---------------------------------
| content holder div            |
| ----------- ----------------- |
| | content | | content div 2 | |
| | div 1   | |               | |
| |         | |               | |
| ----------- ----------------- |
--------------------------------|

当菜单 div 足够高以隐藏任何内容已加载时，这会非常令人困惑。此外，保持菜单 div 宽度固定只会被视为绝对的最后手段。但是，如果有帮助，可以将 div 设为浮动而不是内联块。

有谁知道保持布局如图所示的简单方法。2？我已经测试过，如果另一个内容 div 不可见，当任何一个内容 div 适合图 2 时，仍然会发生这种情况。

编辑：

http://jsfiddle.net/pzHhL/1/

4

2 回答 2

2

轻松简单max-width地为您添加 div“内容持有者 div”，我可以给您数字，但您没有给 jsfiddle。

于 2013-05-20T13:07:21.060 回答
1

将它们切换为浮动将有助于保持您正在寻找的布局

http://jsfiddle.net/duncan/pXdDy/

给出内部内容 div

min-width:48%;
margin:1%;
float:left;

将它们并排放置，直到内容变得足够宽以将它们向下推

于 2013-05-20T13:22:39.590 回答