CSS中左浮动div的负右边距有什么用？

Question

如果父div容器中的两个div向左浮动，那么负右边距会怎样？我听说过一个常见的场景，它可以用来解决一个常见的问题，即2个浮点并排需要并且拉伸到100％宽度但是一个浮点数具有固定的像素宽度。但显然我没有得到这张照片。 我是CSS的新手，所以如果有人可以从头开始解释我会非常有帮助。 请注意，我在某种程度上意识到负边距对静态定位元素的影响，我不清楚上面提到的问题。 提前谢谢。

Answer 1

Twitter Bootstrap的列系统就是一个很好的例子。

获取此代码示例：

<div class="container">
    <header class="header">Header goes here</header>
    <div class="row">
        <div class="col-sm-6"><div class="box">Image 1</div></div>
        <div class="col-sm-6"><div class="box">Image 2</div></div>
    </div>
</div>

通过一些样式，这可以解决这个问题：

Pink是容器填充，lightgreen是列填充。

列均为50％且具有15px填充。如果您希望它们与标题正确对齐，则必须清除左列的padding-left和右列的padding-right。这不是一个很好的解决方法。如果要在较大的视口上切换到较小的列，该怎么办？

幸运的是，还有更好的方法。 div.row左右边距为15px，以补偿周围div.container的15px填充。由于-15px边距，您可以为列添加15px的填充，看起来好像它们与页面的其余部分无缝对齐。如果我们删除负边距，我们得到这个：

这显然不是我们想要的。通常的方法是将第一列的padding-left和最后一列的padding-right设置为0以对齐它们。您只能想象根据视口宽度而变化的较大网格会有多复杂。

JSFiddle available here