Question

我希望我的2个DIV水平居中（并且在同一水平上彼此相邻）。我知道我可以通过将这两个DIV包装到一个＆＃34;容器中来实现这一目标。 DIV但是想知道是否有更清洁的方法来做到这一点？感谢

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

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

}

Answer 1

实现上述目的的正确方法

Demo（您可以调整小提琴窗口的大小并查看）

Demo 2（为了演示目的而更改尺寸）

说明：我们使用的wrapper元素设置为margin: auto;，它会使您的元素水平居中，div将包裹您的浮动元素，而不是我们分配总宽度，这是左浮动div +右浮动div，而.wrap包含浮动元素，我们使用.clear来清除浮点数。您也可以使用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: "";
}

Answer 2

我很确定没有容器的固定宽度项目通常不太可能，但是你可以通过计算这样的东西来完成这个。

margin: 0 calc(50% - 480px);

每个容器的计算结果也不同

我无法测试它，它可能无效但我会说calc是你唯一的机会

中心2 DIV：我需要将它们放入容器DIV中吗？

2 个答案: