0

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

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

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

}
4

2 回答 2

1

实现上述的正确方法

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

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

说明：我们在wrapper这里使用的元素设置为margin: auto;将您的元素水平居中，div它将包裹您的浮动元素，然后我们分配总宽度，即左浮动 div + 右浮动 div，并且.wrap包含浮动元素，我们.clear用来清除浮动。您也可以使用overflow: hidden;orclearfix 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: "";
}
于 2013-09-05T15:01:44.777 回答
1

我很确定这对于没有容器的固定宽度项目通常是不可能的，但是您可以使用类似这样的 calc 来完成此操作。

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

每个容器的计算也会不同

我无法对此进行测试，它可能不起作用，但我会说 calc 是你唯一的机会

于 2013-09-05T15:09:32.817 回答