如果父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/