Question

我正在尝试构建一个布局......前3个容器正在按预期显示.. 我希望容器4显示在container1，container2，container

的旁边

RequirementL
容器4应显示在（Container1 + 2 + 3）

旁边

小提琴： http://jsfiddle.net/prem1980/39rJd/1/

HTML

<div id="main-container">
    <div id="container1">
        container-1
    </div>
    <div id="container2">
    </div>
    <div id="container3">
    </div>
    <div id="container4">
        container 4
    </div>

</div>

CSS

html, body{
    height: 100%;
    width:100%;
    /*background-color:#AFEEEE;*/
    background-color:grey;
}

#main-container {
    height:100%;
    width:100%;

    /*margin:10px 10px 10px 10px;    */
}

#container1 {
    height:60%;
    width:30%;
    margin:10px 10px;
    background-color:green;
    float:left;
    clear:both;
}

#container2 {
    height:20%;
    width:30%;
    margin:10px 10px;
    background-color:yellow;
    float:left;
    clear:both;
}

#container3 {
    height:20%;
    width:30%;
    margin:10px 10px;
    background-color:red;
    float:left;
    clear:both;
}

#container4 {
    height:100%;
    width:30%;
    margin:10px 10px;
    background-color:orange;
    float:left;

}

Answer 1

您在容器4上缺少clear:both：

#container4 {
    height:100%;
    width:30%;
    margin:10px 10px;
    background-color:orange;
    float:left;
    clear:both;

}

Updated JSFiddle

Answer 2

将clear:both添加到.container4

Updated Fiddle

Answer 3

你想要创建两列，对吗？顶部的操作#container-4应与#container-1的顶部对齐。

为此，您需要在#container-1，#container-2和#container-3周围创建一个包装器div。然后你也可以删除这三个div的浮动，清除和宽度。

HTML

<div id="main-container">
    <div id="container123">
        <div id="container1">
            container-1
        </div>
        <div id="container2">
            container-2
        </div>
        <div id="container3">
            container-3
        </div>
    </div>
    <div id="container4">
        container 4
    </div>
</div>

CSS：

#container123 {
    float: left;
    width: 30%;
    height: 100%;
    margin: 0 10px;
}
#container1 {
    height:60%;
    margin:10px 0;
    background-color:green;
}
#container2 {
    height:20%;
    margin:10px 0;
    background-color:yellow;
}
#container3 {
    height:20%;
    margin:10px 0;
    background-color:red;
}
#container4 {
    height:100%;
    width:30%;
    margin:10px 10px;
    background-color:orange;
    float: left;
}

检查updated Fiddle

[编辑] 如果您不需要#main-container，则可以将其删除，请检查the fiddle。

Answer 4

将此添加到＃container4：

position:absolute;
top:8px;
left:35%;

布局构建 - Div元素未对齐

4 个答案: