请参阅以下codepen以了解我目前拥有的内容：
https://codepen.io/anon/pen/GjWYPO
<div class="container">
<div class="col-1-3 bg-blue">blue left</div>
<div class="col-1-3" style="font-size:0px;">
<div class="col-1-3 bg-green">green 1</div>
<div class="col-1-3 bg-green">green 2</div>
<div class="col-1-3 bg-green">green 3</div>
</div>
<div class="col-1-3 bg-blue">blue right</div>
</div>
我的问题是,看看码本,我如何在绿色单元格之间创建一个排水沟.我的研究指出使用负边距和填充,但我不能让它工作.
像这里描述的东西：http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
我的要求不是！创造更多的div.我不想创建一个“行包装器”,如果它可以解决当前笔中的html,我真的很高兴.我不介意,并猜测它的一部分解决方案,创建一个“行类”并将其应用于父细胞(此处带有id’蝙蝠侠’),持有绿色细胞.
第二个要求是,即使codepen示例使用3个单元格,该解决方案也适用于任意数量的单元格.所以它不能使用nth-child
第三,我真的不喜欢！使用flex来解决这个问题.
忽略容器类和font-size：0的东西,它只是在使用内联块时删除空格的临时修复.我真正的代码使用PHP缩小.
我希望这是有道理的.下面是我希望结果如下所示的图片：
非常感谢任何帮助,
提前致谢！
== ==编辑
增加了不使用flex的要求.
解决方法
你可以将它添加到你的CSS,它应该工作(测试)：
.bg-green {
width: calc((100% - ((3 - 1)*2%))/(3/1));
margin-right: 2%;
}
.bg-green:last-child{
margin-right: 0;
}
编辑片段：
.container{
font-size: 0;
}
[class|="col"] {
display:inline-block;
vertical-align: top;
position:relative;
font-size:20px;
}
.col-1-3{
width:calc(100%/(3/1));
}
.col-2-3{
width:calc(100%/(3/2));
}
.col-1{
width:100%;
}
.bg-blue{
background-color:#42a5f5;
color:#ffffff;
}
.bg-green{
background-color:#66bb6a;
color:#ffffff;
}
.bg-green {
width: calc((100% - ((3 - 1)*2%))/(3/1));
margin-right: 2%;
}
.bg-green:last-child{
margin-right: 0;
}
<div class="container">
<div class="col-1-3 bg-blue">blue left</div>
<div class="col-1-3" style="font-size:0px;">
<div class="col-1-3 bg-green">green 1</div>
<div class="col-1-3 bg-green">green 2</div>
<div class="col-1-3 bg-green">green 3</div>
</div>
<div class="col-1-3 bg-blue">blue right</div>
</div>
只需将“3”替换为您拥有的任何数量的列,并根据需要更改边距值.
带有负边距的版本
稍微改变标记(与Bootstrap类似的结构)：
<div class="col-1-3"> <div class="bg-green">green 1</div> </div> <div class="col-1-3"> <div class="bg-green">green 2</div> </div> <div class="col-1-3"> <div class="bg-green">green 3</div> </div>
以及CSS中的部分内容
.children-has-gutters > div {
padding-left: 15px;
padding-right: 15px;
Box-sizing: border-Box;
}
.bg-blue {
background-color:#42a5f5;
color:#ffffff;
width:calc((100%/(3/1)) + 15px);
}
.container{
font-size: 0;
}
[class|="col"] {
display:inline-block;
vertical-align: top;
position:relative;
font-size:20px;
}
.col-1-3{
width:calc(100%/(3/1));
}
.col-2-3{
width:calc(100%/(3/2));
}
.col-1{
width:100%;
}
.children-has-gutters{
margin-left:-15px;
margin-right:-15px;
width: calc((100% / (3/1)) + 30px);
}
.children-has-gutters > div{
padding-left:15px;
padding-right:15px;
Box-sizing: border-Box;
}
.bg-blue{
background-color:#42a5f5;
color:#ffffff;
}
.bg-green{
background-color:#66bb6a;
color:#ffffff;
}
<div class="container">
<div class="col-1-3 bg-blue">blue left</div>
<div class="col-1-3 children-has-gutters" style="font-size:0px;">
<div class="col-1-3">
<div class="bg-green">green 1</div>
</div>
<div class="col-1-3">
<div class="bg-green">green 2</div>
</div>
<div class="col-1-3">
<div class="bg-green">green 3</div>
</div>
</div>
<div class="col-1-3 bg-blue">blue right</div>
</div>
请注意,您必须为每个蓝色列添加15px,以避免容器宽度问题.你可以玩游戏并检查没有它会发生什么 – 容器中元素的宽度将是100％ – 30px(负边距).
