Question

我有以下代码，工作正常。正如你所看到的，它在3个绿色元素之间创建了一个沟槽，这三个元素是三个蓝色元素中第二个的子元素。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

在下面的示例中，只有一个蓝色元素，而不是三个。突然之间，它的绿色子元素之间的阴沟没有按预期工作。当然，它之间有空间，但它在页面上创建了一个水平滚动条，最左侧和最右侧也是阴沟，不知何故，负边距似乎不起作用。如果有人能指出与上述代码相比有什么突破，我将不胜感激。

＆＃13;

.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% + 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;
}

＆＃13;

<div class="container">
	<div class="col-1 bg-blue 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>

＆＃13;

所以，颜色方面它应该去：屏幕左边缘，绿色1，蓝色间隙，绿色2，蓝色间隙，绿色3，屏幕右边缘。

这只是一个例子，孩子的数量可以改变，所以它并不总是3。这个问题是我的一个老问题的后续问题，因为我现在发现了这个错误并且无法找出问题所在：

old question here >>

要求：我不想添加新的div元素，我不想更改为flexbox。

Answer 1

这是一个丑陋的黑客，但你可以把溢出物隐藏在你的容器上以摆脱边缘的蓝色：

.container{
    font-size: 0;
    overflow: hidden;
}

Answer 2

我只是没有看到任何理由为负余量和类calc的{{1}}宽度，你可以做的只是添加...has-gutters除了{{1 }}

padding-right

last-child

使用负保证金中断的DIV之间的排水沟

2 个答案: