Question

假设我们有水平行标记

.clearfix:after {  content: ""; display: table; clear: both; }

.col { float : left; width : 20%; }
.item { margin : 0 50px; }

<div class="box clearfix">
    <div class="col"><div class="item">content</div></div>
    <div class="col"><div class="item">content</div></div>
    <div class="col"><div class="item">content</div></div>
    <div class="col"><div class="item">content</div></div>
    <div class="col"><div class="item">content</div></div>
</div>

我们在.item和第一个.item和.box之间以及之间存在50px的差距最后一个.item和。框

问题：是否存在通用布局以节省.item之间的差距，并在视觉上消除此类标记中.item和box之间的间隙？

没有：firs-child和：last-child，因为响应式标记，我们经常需要减少cols的数量

Answer 1

它可以解决你的问题....！

body {margin: 0px;}
.clearfix:after {  content: ""; display: table; clear: both; }
.box {background: red;}
.col { float : left; width : 15%; }
.item { background: yellow; text-align: center;}
.col + .col {margin-left: 6.25%;}

<div class="box clearfix">
    <div class="col"><div class="item">content</div></div>
    <div class="col"><div class="item">content</div></div>
    <div class="col"><div class="item">content</div></div>
    <div class="col"><div class="item">content</div></div>
    <div class="col"><div class="item">content</div></div>
</div>

css删除行中的开始和最后间隙

1 个答案: