0

我有两个菜单浮动到页面的左侧。然后我有一个 div 以自动高度浮动到右侧，以适应页面上的内容（菜单的结果）。

在我的示例中，我会将 ul 视为 div，因为它们无论如何都设置为块元素：

<body>
    <div class="container">
        <div class="div1_head"></div>
        <div class="div1"></div>
        <div class="div2_head"></div>
        <div class="div2"></div>
        <div class="div3_head"></div>
        <div class="div3"></div>
    </div>
</body>

这些元素中的每一个都有一个单独的 div 标题，位于它们上方。

我无法弄清楚清除和浮动 div 的正确方法（如果有的话），以便它们都将在正确的行中对齐。

margin:0;
 padding:0;
 .container {
    width:100%;
    float:left;
    height:500px;
    background:#ebebeb;
}
.div1_head {
    float:left;
    background: #cfcfcf;
    width:20%;
    height:50px;
    margin: 24px 0 0 0;
}
.div1 {
    float:left;
    background: #dedede;
    width:20%;
    height:200px;
    clear:left
}
.div2_head {
    float:left;
    background: #cfcfcf;
    width:20%;
    height:50px;
    clear:left;
    margin: 24px 0 0 0;
}
.div2 {
    float:left;
    background: #dedede;
    width:20%;
    height:200px;
    clear:left
}
.div3_head {
    float:right;
    background: #cfcfcf;
    width:76%;
    height:50px;
    clear:none;
    margin: 0 0 0 4%;
}
.div3 {
    float:right;
    background: #dedede;
    width:76%;
    height:200px;
    clear:none;
    margin: 0 0 0 4%;
}

对于我正在使用的 Web 应用程序的性质，将 div 和 header 嵌套到更大的容器 div 中不是一种选择。

这是一个jsfiddle：http: //jsfiddle.net/Kq49s/1/

4

1 回答 1

0

好的，如果您不想在当前应用中添加新的 DIV。

尝试像这样更改您的 div3 的 css ...

这是关于 jsfiddle 的演示... http://jsfiddle.net/NTX6h/

.div3_head {
    position:absolute;
    top:24px;     /* same as your .div1_head's margin top */
    right:10px;   /* if you want to add some right margin */
    background: #cfcfcf;
    width:76%;
    height:50px;
}
.div3 {
    position:absolute;
    top:74px;     /* .div3_head's margin top + .div3_head's height  */
    right:10px;   /* if you want to add some right margin */
    background: #dedede;
    width:76%;
    height:200px;
}
于 2013-05-29T02:21:16.990 回答