html – div之间的天沟

概述请参阅以下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 clas 请参阅以下codepen以了解我目前拥有的内容： https://codepen.io/anon/pen/GjWYPO

<div >    <div >blue left</div>    <div  >        <div >green 1</div>        <div >green 2</div>        <div >green 3</div>    </div>    <div >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 >  <div >blue left</div>    <div  >    <div >green 1</div>        <div >green 2</div>        <div >green 3</div>  </div>    <div >blue right</div></div>

只需将“3”替换为您拥有的任何数量的列,并根据需要更改边距值.

带有负边距的版本

稍微改变标记(与bootstrap类似的结构)：

<div >  <div >green 1</div></div><div >  <div >green 2</div></div><div >  <div >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 >  <div >blue left</div>	<div  >        <div >      <div >green 1</div>    </div>    <div >      <div >green 2</div>    </div>    <div >      <div >green 3</div>    </div>        </div>	<div >blue right</div></div>

请注意,您必须为每个蓝色列添加15px,以避免容器宽度问题.你可以玩游戏并检查没有它会发生什么 – 容器中元素的宽度将是100％ – 30px(负边距).

总结

以上是内存溢出为你收集整理的html – div之间的天沟全部内容，希望文章能够帮你解决html – div之间的天沟所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。