css - 在页面上居中放置 2 个 DIV，每个 DIV 占 45%

Question

我有两个 <div>的，每个都设置为其容器宽度的 45%。有没有办法使 <div> 居中？使得它们在容器的左右两侧有相同的空间，并且它们之间也有空间。

一开始我只是做了每个 <div> 50% 并且有 padding: 0px 25px;在容器上，这样它们就不会从一边跑到另一边。问题是左边右边<div>向右跑到右边的左边<div>我想在它们之间留一些空间。

当我尝试使用 margin 在它们之间留出空间时或 padding , 对<div>会被移到左边下方，而不是留在它旁边。

Answer 1

将第一个元素的 margin-right 设置为百分比宽度:

.first {
    float: left;
    width: 45%;
    margin-right: 10%;
}

.second {
    float: left;
    width: 45%;
}

在这里查看 JSFiddle:https://jsfiddle.net/1nkaa05z/

如果你需要在每个元素的外边缘留出一些空间，你可以将第一个元素的margin-left设置为2%，第二个元素的margin-right设置为2%，将第二个元素的margin-right设置为第一个元素(分隔符)到 6%。只要剩余宽度不超过 10%，第二个元素就不应换行。