嵌套的div包含在不希望的优先级中

时间:2013-05-20 13:03:07

标签: html css

我的嵌套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/

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

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

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

给出内部内容div

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

将它们放在彼此旁边,直到内容变得足够宽以推动它们