html – div之间的天沟

发布时间：2020-12-14 23:32:46 所属栏目：资源来源：网络整理

导读：请参阅以下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

请参阅以下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(负边距).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!