css - 四个盒子同样分开，但一个不听

Question

这是一个问题。http://www.jsfiddle.net/PL6KX/ 我不知道问题出在哪里。非常感谢帮助。谢谢。

我想从边缘按比例居中。水平中心。

HTML：

<div id="firstleft-box"></div>
<div id="secondleft-box"></div>
<div id="firstright-box"></div>
<div id="secondright-box"></div>

CSS：

#firstleft-box {
    position: absolute;
    display:block;
    left: 20%;
    border: 2px solid black;
    width: 100px;
    height: 100px;
}

#secondleft-box {
    position: absolute;
    display:block;
    left: 40%;
    border: 2px solid black;
    width: 100px;
    height: 100px;
}

#firstright-box {
    position: absolute;
    display:block;
    left: 60%;
    border: 2px solid black;
    width: 100px;
    height: 100px;
}

#secondright-box {
    position: absolute;
    display:block;
    left: 80%;
    border: 2px solid black;
    width: 100px;
    height: 100px;
}

Answer 1

Use float to get divs next to each other, margin to make space between them and then wrap one div around them and center it with margin: 0px auto; your approach is too complicated

Answer 2

请参阅下面的 JS Fiddle，了解为什么您的代码没有产生您期望的输出。

http://jsfiddle.net/PL6KX/2/

基本上，您将每个框的左侧对齐在 20、40、60、80 等处。您假设它将对齐框的中心。我在上面的小提琴中所做的是创建 5 个 20% 宽的框，以便它们相遇和接触的点分别代表 20%、40%、60% 和 80%。如您所见，顶部的框将其左边缘与这些百分比对齐。

你需要什么：（小提琴中的第三组盒子）

http://jsfiddle.net/PL6KX/4/

HTML：

<div class="container">
<div id="new-box"></div>
<div id="new-box"></div>
<div id="new-box"></div>
<div id="new-box"></div>
</div>

CSS：

.container {
    margin: 0 auto;
    width: 450px;
    border: 1px solid red;
    overflow: hidden;
    clear: both;
    margin-top: 20px;
}

#new-box {
    box-sizing: border-box;
    float: left;
    width: 100px;
    height: 100px;
    margin-left: 10px;
    border: 1px solid black;
}