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/

如果在每个元素的外边缘上需要一些空间，可以将第一个元素的左边距设置为2％，将第二个元素的边距右边设置为2％，并将边距右边设置为第一个元素（分隔符）为6％。只要剩余宽度不超过10％，第二个元素就不应该掉到新的一行。

Answer 2

您可以使用中心标记

`<center>
<div1></div>
<div2></div>
</center>
`

Answer 3

构建布局最简单，最推荐的方法是使用网格。

 <div class="grid">
    <div class="column">
      <div class="content">Element 1</div>
    </div>
    <div class="column">
      <div class="content">Element 2</div>
    </div>
</div>

CSS

.grid{
    background-color: #000;
    height: 100px;
    font-size: 0;
}
.column{
    display: inline-block;
    width: 45%;
    background-color: yellow;
    font-size: 1rem;
    padding: 0 2.5%;
}

.first {
    display: inline-block;
    width: 45%;
    background-color: yellow;
    margin-right:2.5%;
    margin-left:2.5;
}

.content{
    background-color: gold;
}

.second {
    float: left;
    width: 45%;
    background-color: yellow;
    margin-right: auto;
    margin-left: auto;
}

首先创建容器（.grid）ant set font-size为0.然后根据需要放入尽可能多的列。你决定与阴沟。在这个45％的例子中，天沟将是100％ - （2 * 45％）除以4（如果你只想在中间设置排水沟，则为2）。将该值放入填充.column。接下来，您必须重置font-size。最后只是将您的内容放入其中。

https://jsfiddle.net/1nkaa05z/2/

所有其他的东西，如桌子，桌子（桌子，但在css。这怎么会更好？），花车，中心等现在已经过时了。这个或弹性框是我们应该如何做的。

中心2 DIV位于每个DIV占45％的页面上

3 个答案: