Question

我有两个div，我放在另一个div中：

<div id="outer_div">
    <div id="left_div">
        <!-- Buttons and text field -->
    </div>
    <div id="right_div">
        <!-- Buttons and drop list -->
    </div>
</div>

我的样式表包括以下内容：

#left_div {
    float:left;
}
#right_div {
    float:right;
}

现在，当我这样做时，我希望左右div分别位于屏幕的左侧和右侧，并且它们也将水平对齐。第一个是正确的，然而，第二个希望不是真的。如果我将left_div放在right_div上方，则right_div按钮和下拉列表位于left_div下方的一行上。如果我将right_div放在left_div之上，则div几乎是一致的，但右边的div稍微抬高，因此它与它上面的div重叠。

Answer 1

尝试将宽度设置为outer_div

#outer_div {
    width: 100%; //or whatever width you would like it to be
}

#left_div, #right_div {
    width: 50%;
}

Answer 2

这是一个适合我的样本。

<div id="outer_div">
    <div id="left_div">
        <div class="button"></div>
        <div class="button"></div>
    </div>
    <div id="right_div">
        <div class="button"></div>
        <div class="button"></div>
    </div>
</div>

和css

#outer_div
{
    overflow: hidden;
    width: 450px;
    background: yellow;
}

#left_div {
    float:left;
    width:200px;
    height: 200px;
    border: thin red solid;
}
#right_div {
    float:right;
    width:200px;
    height: 200px;
    border: thin blue solid;
}

.button {
    width: 75px;
    height: 25px;
    margin: 5px;
    border: thin green solid;
}

和小提琴：http://jsfiddle.net/cMhpK/

HTML：div浮动不是水平对齐的

2 个答案: