我有一些内联 block 元素,我希望将它们放在一个容器 div 中。随着容器 div 的大小调整,跨/上/下出现的内联 block 元素的数量发生变化。我希望这些 div 保持左对齐,这样它们看起来像:
XXXXXXX
XXXXXXX
XXX
并且不喜欢:
XXXXXXX
XXXXXXX
XXX
但需要保持左右边距相等。所以最左边和最右边的 div 在任何时候都与容器的边缘等距:
|<-XXXXXXX->|
|<-XXXXXXX->|
|<-XXX |
我如何在纯 CSS 中做到这一点?
最佳答案
如果您真的想要一个纯 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 实现。
关于html - 水平边距相等的左对齐 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28898779/