所以我一直在与这种情况作斗争。
标记
<div id="container">
<div class="grid">
<div class="col-1-4">
<div class="module">
<h3>1/4</h3>
</div>
</div>
<div class="col-1-2">
<div class="module">
<h3>1/2</h3>
</div>
</div>
<div class="col-1-4">
<div class="module">
<h3>1/4</h3>
</div>
</div>
</div>
CSS
*{
box-sizing : border-box;
}
[class *="col"]{
float : left;
height : auto;
overflow: hidden;
}
.col-1-2{
width : 50%;
}
.col-1-4{
width : 25%;
}
#container{
width : 960px;
padding : 20px;
margin : 10px auto 0 auto;
}
.module {
padding: 20px;
background: #eee;
font-family: sans-serif;
}
这使得列正确并排显示。但是两端相互折叠,整个东西看起来像一个大矩形。
现在,我尝试通过编辑现有的 CSS 样式[class*="col"]
并添加padding-right : 20px
到它来伪造排水沟
[class *="col"]{
float : left;
height : auto;
overflow: hidden;
padding-right : 20px;
}
现在一切看起来像
我已经设法放入排水沟,但如果你仔细观察,三个灰色矩形不在容器 div 内居中,它们更多地被推向右侧。
如何应对这种情况?如果有人建议一种更好的方法来添加排水沟,那将非常有帮助。
谢谢
(图片中的蓝色突出显示列的实际大小)