多个div水平对齐（CSS）

Question

我需要调整这些 div 的对齐方式，以便“content1”和红色div之间的距离等于“content4”和红色div之间的距离。 我不介意改变蓝色div的边距，但这应该适用于任何宽度。 我曾经通过使 4 个蓝色div 的宽度 + 它们的左右边距 = 100% 来实现这一点，但在这种情况下似乎不起作用。

我还尝试在红色div内添加另一个包含所有蓝色div的div，并给它margin: 0 auto，但也不起作用。 jsfiddle 中的代码（已更新） PS：如果我的问题不够清楚，请随意修改。

- FranLegon

---

我们可以调整什么？宽度或边距可调整吗？您有预期结果的图像吗？ - Paulie_D

@Paulie_D 你可以调整blue-div的边距，但不能调整宽度。它们将有一张图片，但我稍后可以处理。 - FranLegon

Answer 1

您可以使用所有现代浏览器支持的不可思议的属性 box-sizing: border-box;，包括IE8！并且可以将宽度和边距设置为百分比：

.red, .blue {
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

.red {
    width:650px;
    height:1000px;
    background:red;
    padding: 1% 0 0 1%; // Space top and left of red
}

.blue {
    height:200px;
    width: 24%;
    background:blue;
    display:inline-block;
    float: left;
    margin: 0 1% 1% 0; // Space bottom and right of each blue
}

http://jsfiddle.net/Pik_at/L7qpgdkk/3/

- Pik_at

---

谢谢！但是overflow: hidden是用来做什么的？ - FranLegon

嗯！在这种情况下，我们不需要它，我要进行编辑。 - Pik_at

作为上述内容的延伸，我尝试将“Content1”、“Content2”文本居中显示在它们各自的蓝色框中，但是没有成功。我该怎么做？ - Chiwda

Answer 2

嗯，这很容易。看看这个。

HTML

<div class="red">
    <div class="blue"><div>content1</div></div>
    <div class="blue"><div>content2</div></div>
    <div class="blue"><div>content3</div></div>
    <div class="blue"><div>content4</div></div>
    <div class="blue"><div>content5</div></div>
    <div class="blue"><div>content6</div></div>
</div>

CSS

.red {
    width:680px;
    height:1000px;
    background:red;
}

.blue {
    width: 25%;
    display:inline-block;
    margin-right: -4px;
    box-sizing: border-box;
    padding: 1%;
}

.blue > div {
    background:blue;
    height:200px;
}

点此查看示例代码.

- raju

---

但是结果必须能够正常工作，即使蓝色div的宽度不是20％或25％。 - FranLegon

蓝色块：宽度 = 100% /（蓝色块数量）。 - raju

Answer 3

你的计算有误：(20% * 4) + (1% * 4) = 88%。

你必须将上/左边距设置为4%，这样宽度将为：80% + (5 * 4%) = 100%。

还添加了font-size: 0以解决内联空格问题。

.blue {
    margin: 4% 0 0 4%;
}

Fiddle：http://jsfiddle.net/L7qpgdkk/1/

参考：解决内联块元素之间的空格问题

- emmanuel

---

仍然在右侧显示一些较小的边距。 - Naeem Shaikh

我的这边工作得很好。 - emmanuel

我不知道为什么在我的电脑上它显示得更多向右，但我同意这是一个好的解决方案。 - Naeem Shaikh

@emmanuel 我知道总和不等于100％，这就是为什么我说我曾经那样做的原因。font-size:0会很有用。 - FranLegon