使用容器的两侧间隔浮动元素

Question

我的浮动元素基本上是一个网格，我想让它们与容器的左侧和右侧齐平，同时保持内部分离。

这里有一个例子，其中红色正方形浮动50x50 div，在蓝色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>

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

我想让红色方块与蓝色方块的左右两侧完全齐平。蓝色正方形可以有几个宽度，可以添加或隐藏红色正方形，因此修改特定红色正方形边距的第n个类型选择器并不实用。

这可以通过给蓝方块一个负右填充来解决，但CSS规范不允许出现一些未指明的负填充，所以现在我被卡住了。我不知道任何人都可以证明允许负利润但不允许负填充。

Answer 1

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

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

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

结果是您的.red元素现在是内联的，并且会在.blue容器的宽度内均匀分布。由于您对.blue的宽度值进行了硬编码，因此您将获得.red块之间所需的水平间距（无需设置右边距）。

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

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

line-height: 0上的.blue和vertical-align: top上的.blue:after由于线路引导（底部上方和下方的空间）而处理底部的任何额外空白区域文本）。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;