divs之间的沟槽 [英] Gutter between divs

问题描述

请参阅以下codepen以了解我目前的内容： https://codepen.io/anon/pen/ GjWYPO

 < div class =container> 
< div class =col-1-3 bg-blue>蓝色左侧< / div> 
< div class =col-1-3style =font-size：0px;> 
 
< div class =col-1-3 bg-green>绿色1< / div> 
< div class =col-1-3 bg-green>绿色2< / div> 
< div class =col-1-3 bg-green>绿色3< / div> 
 
< / div> 
< div class =col-1-3 bg-blue>蓝色右< / div> 
< / div> 
  

我的问题是，看着codepen，如何在绿色单元格之间创建一个装订线。我的研究指向使用负边距和填充，但我无法完全实现它。
就像这里描述的那样： 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缩小。

我希望这是有道理的。下面是我想要结果如何的图片：

感谢任何帮助，
在此先感谢！

==编辑==

$ $ b $ p

解决方案

您可以将此添加到您的CSS，它应该工作（测试）：

  .bg-green {
 width：calc（（100％ - （（3-1） * 2％））/（3/1））; 
保证金率：2％; 
} 
 
 .bg-green：最后一个孩子{
 margin-right：0; 
 
  

编辑过的片段：

<

.container {font-size：0;} [class | =col] {display：inline-块; vertical-align：top;位置：相对; 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;颜色：#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>蓝色左侧< / div> < div class =col-1-3style =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>绿色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>绿色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>绿色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;位置：相对;字体大小：20像素;} COL-1-3 {宽度：计算值（100％/（3/1））;} COL-2-3 {宽度：计算值（100％/（3/2））; } .col-1 {width：100％;}。children-have-gutters {margin-left：-15px;}。保证金右：-15px;宽度：calc（（100％/（3/1））+ 30px）;}。children-has-gutters> div {padding-left：15px;填充右：15像素; box-sizing：border-box;}。bg-blue {background-color：＃42a5f5;颜色：#FFFFFF;} BG-绿色{背景色：＃66bb6a; color：#ffffff;}

< div class =容器> < div class =col-1-3 bg-blue>蓝色左侧< / div> < div class =col-1-3 children-has-guttersstyle =font-size：0px;> < div class =col-1-3> < div class =bg-green>绿色1< / div> < / DIV> < div class =col-1-3> < div class =bg-green>绿色2< / div> < / DIV> < div class =col-1-3> < div class =bg-green>绿色3< / div> < / DIV> < / DIV> < div class =col-1-3 bg-blue> blue right< / div>< / div>

请注意，您必须为每个蓝色列添加15px，以避免容器宽度问题。你可以玩耍并检查没有它会发生什么 - 容器中元素的宽度将为100％ - 30px（负边距）。

See the following codepen for what I currently have: 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>

My question is, looking at the codepen, how do I create a gutter between the green cells. My research points to using negative margins and padding, but I cant get it to work at all. Something like described here: http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

My requirements are, not! to create any more div's. I dont want to create a "row wrapper", i would really be happy if its solvable with the html that is in the current pen. I dont mind, and guess its part of the solution, to create a "row class" and apply it to the parent cell (here with id 'batman'), holding the green cells.

Second requirement is, that even though the codepen example uses 3 cells, that the solution works on any amount of cells. So it cant be using nth-child

and third, I would really really prefer to not! use flex to solve this problem.

Ignore the container class and the font-size:0 thing, its only a temporary fix to remove white space when using inline-block. My real code uses php minification.

I hope this make sense. Below is a picture how I want the result to look like:

Would be grateful for any help, thanks in advance!

==edit==

Added requirement to not use flex.

解决方案

You can add this to your CSS and it should work (tested):

.bg-green {
  width: calc((100% - ((3 - 1)*2%))/(3/1));
  margin-right: 2%;
}

.bg-green:last-child{
  margin-right: 0;
}

Edited snippet:

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

Just replace "3" with whatever numbers of columns you have and change the margin-right value as you like.

Version with negative margin

Change markup a little bit (similar structure to 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>

And following part in 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>

Note that you had to add 15px to each blue column, to avoid issue with container width. You can play around and check what happens without it - width of elements in container would be 100% - 30px (negative margin).

这篇关于divs之间的沟槽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！