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

Question

如果父div容器内的两个div向左浮动，负负边距会做什么？ 我听说过一种常见的情况，可以将其用于解决一个常见问题，即两个浮子必须并排并伸展到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>

通过一些样式，这可以使您获得：

粉色是容器填充，浅绿色是列填充。

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

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

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

JSFiddle在这里可用 。