如果父div容器内的两个div向左浮动,负负边距会做什么?我听说过一种常见的情况,可以用它解决一个常见的问题,即要求两个并排并排并延伸到100%的宽度,但其中一个浮动具有固定的像素宽度。但显然我没有照片。
我是CSS的新手,所以如果有人可以从头开始向我解释我会很有帮助。
请注意,我不清楚负边距对静态定位元素的影响,只是我不清楚上述问题。
提前致谢。

最佳答案

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-right。这不是一个很好的解决方法。如果要切换到较大视口中的较小列怎么办?

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

 

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

JSFiddle available here

关于html - CSS中左 float div的负右边距有什么用?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29791786/

10-10 14:18
查看更多