html - 水平边距相等的左对齐 div

Question

我有一些内联 block 元素，我希望将它们放在一个容器 div 中。随着容器 div 的大小调整，跨/上/下出现的内联 block 元素的数量发生变化。我希望这些 div 保持左对齐，这样它们看起来像:

XXXXXXX
XXXXXXX
XXX

并且不喜欢:

XXXXXXX
XXXXXXX
  XXX 

但需要保持左右边距相等。所以最左边和最右边的 div 在任何时候都与容器的边缘等距:

|<-XXXXXXX->|
|<-XXXXXXX->|
|<-XXX      |

我如何在纯 CSS 中做到这一点？

http://jsfiddle.net/e818rfum/

Answer 1

如果您真的想要一个纯 CSS 解决方案，我建议您对单个元素使用居中容器 + 媒体查询以在调整大小时调整此容器的宽度。

body {
    margin: 0;
}

.container {
    margin: 0 auto;
    background: #ddd;
}

@media (min-width: 110px) { .container { width: 110px; } }
@media (min-width: 220px) { .container { width: 220px; } }
@media (min-width: 330px) { .container { width: 330px; } }
@media (min-width: 440px) { .container { width: 440px; } }
@media (min-width: 550px) { .container { width: 550px; } }
@media (min-width: 660px) { .container { width: 660px; } }
@media (min-width: 770px) { .container { width: 770px; } }
@media (min-width: 880px) { .container { width: 880px; } }
@media (min-width: 990px) { .container { width: 990px; } }

.item {
    float: left;
    width: 100px;
    height: 100px;
    background: red;
    margin: 5px;
}

.container:after {
    content: '';
    display: block;
    clear: left;
}

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

您也可以在 JSFiddle 上访问此演示.

除了调整容器宽度的大小，这会导致左/右边距不同，您还可以为元素边距或宽度设置百分比值。它基本上是一个问题，你想在这里成为你的动态值(value):

• 可变容器边距(参见演示)
• 可变元素边距
• 可变元素宽度

这一切都可以通过 CSS 实现。