css - 中心 2 DIV : Do I need to put them in a container DIV?

Question

我希望我的 2 个 DIV 水平居中(并且在同一水平面上彼此相邻)。我知道我可以通过将这两个 DIV 包装到一个“容器”DIV 中来实现这一点，但想知道是否有更简洁的方法来做到这一点？谢谢

#bottom-left {
    float: left;
    width: 480px;;
    background: #5421c2;
}

#bottom-right {
    float: right;
    width: 480px;;
    background: #2ec4a6;

}

Answer 1

实现上面的正确方法

Demo (您可以调整 fiddle 窗口的大小并查看)

Demo 2 (为演示目的更改尺寸)

说明:我们在这里使用一个 wrapper 元素设置为 margin: auto; 这将使您的元素水平居中，div 将包装你的 float 元素，然后我们分配总宽度，即左浮动 div + 右浮动 div，并且 .wrap 包含 float 元素，我们使用 .clear清除 float 。您还可以使用 overflow: hidden; 或 clearfix hacks 而不是我在类 .clear

中使用的属性

.wrap {
    width: 960px;
    margin: auto;
    background: #000;
}

#bottom-left {
    float: left;
    width: 480px;;
    background: #5421c2;
    height: 300px;
}

#bottom-right {
    float: right;
    width: 480px;;
    background: #2ec4a6;
    height: 300px;
}

.clear:after {
    clear: both;
    display: table;
    content: "";
}