在容器的两侧隔开浮动元素

Question

我的浮动元素基本上以网格形式布置，我想让它们与容器的左右两侧齐平，同时保持内部分隔。

这是一个示例，其中红色方块浮动 50x50 divs，在具有固定宽度和自动高度的蓝色 div 内间隔 10 个像素。

http://i.stack.imgur.com/ln8jf.png

<div class='blue' style='width: 110px'>
    <div class='red'></div>
    <div class='red'></div>
</div>

<div class='blue' style='width: 110px'>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
</div>

<div class='blue' style='width: 170px'>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
</div>

这是一个相关的fiddle：https://jsfiddle.net/sujadkvb/5/

我想让红色方块与蓝色方块的左右两边完全平齐。蓝色方块可以有多种宽度，红色方块可以添加或隐藏，因此修改特定红色方块边距的 nth-of-type 选择器不实用。

这可以通过给蓝色方块一个负的右填充来解决，但是 CSS 规范由于某些不明原因不允许负填充，所以现在我被卡住了。我看不出有什么人可以证明允许负边距但不允许负填充是合理的。

Answer 1

这是使用内联块而不是浮动元素实现布局的一种方法。

首先，对于 .blue 包含块，设置以下 CSS 属性：text-align: justify 和 line-height: 0.

其次，对于.red子元素，删除float属性并添加display: inline-block.

结果是您的 .red 元素现在是内联的，并且将 spaced 在 .blue 容器的宽度内均匀地排成一行。由于您为 .blue 硬编码了一个不错的宽度值，您将获得 .red 块之间所需的水平间距（无需设置右边距）。

text-align: justify 的剩余问题是最后一行不会拉伸以填满整个宽度（这就是 justify 设置的工作原理，以防止短线以丑陋的方式被拉伸） .

要解决此问题，请添加一个伪元素 .blue:after，它是一个宽度为 100% 的内联块。这将强制在你的红色块之后创建一个新行，结果是所有红色块都是 left/right 对齐的。

.blue 上的 line-height: 0 和 .blue:after 上的 vertical-align: top 会处理由于行首导致的底部多余的白色 space (space 高于和低于文本基线）。

.blue {
    margin-top: 10px;
    background-color: #00A2E8;
    height: auto;
    overflow: auto;
    padding-bottom: 10px;
    text-align: justify;
    line-height: 0;
}
.blue:after {
    content:'';
    display: inline-block;
    width: 100%;
    vertical-align: top;
}
.red {
    background-color: red;
    width: 50px;
    height: 50px;
    display: inline-block;
    margin-top: 10px;
}

<div class='blue' style='width: 110px'>
  <div class='red'></div>
  <div class='red'></div>
</div>
<div class='blue' style='width: 110px'>
  <div class='red'></div>
  <div class='red'></div>
  <div class='red'></div>
  <div class='red'></div>
</div>
<div class='blue' style='width: 170px'>
  <div class='red'></div>
  <div class='red'></div>
  <div class='red'></div>
  <div class='red'></div>
  <div class='red'></div>
  <div class='red'></div>
</div>

在容器的两侧隔开浮动元素

Spacing out floating elements with both sides of a container

css

css-float