div之间的天沟

时间：2016-09-25 09:49:16

标签： html css

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

我的问题是，看看codepen，我如何在绿色细胞之间创建一个排水沟。我的研究指出使用负边距和填充，但我不能让它工作。 类似于此处描述的内容：http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

我的要求是，而不是！创造更多的div。我不想创建一个＆＃34;行包装器＆＃34;如果它可以解决当前笔中的html，我真的很高兴。我不介意，并猜测它的一部分解决方案，创建一个＆＃34;行类＆＃34;并将其应用于父细胞（此处带有id＆＃39; batman＆＃39;），保持绿色细胞。

第二个要求是，即使codepen示例使用3个单元格，该解决方案也适用于任意数量的单元格。所以它不能使用nth-child

第三，我真的不喜欢！使用flex来解决这个问题。

忽略容器类和font-size：0的东西，它只是在使用内联块时删除空格的临时修复。我真正的代码使用php缩小。

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

感谢任何帮助， 提前谢谢！

==编辑==

增加了不使用flex的要求。

4 个答案:

答案 0 :(得分：2)

我认为将此添加到您的CSS中，将为您完成这项工作。 

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

答案 1 :(得分：1)

您可以选择第二个div并重置宽度和边距：

.col-1-3:nth-child(2) {
  margin:0 1em;
    width:calc(100% / (3/1) - 2em);
}


.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));
}
/* here update to overwrite width and add margins rules */
.col-1-3:nth-child(2) {
  margin: 0 1em;/* whatever , double it before taking it off from width */
  width: calc(100% / (3/1) - 2em);
}
/* end update */
.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;
}
<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>

您可能还想看一下display：flex：

.container{
  display:flex;
}
[class|="col"] {
    flex:1;/* flex children, spray them evenly */
    font-size:20px;
}
.container .container .col-1-3:nth-child(2) {/* select second containere on second level */
  margin:0 1em;
}
.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 container"><!-- here make it a flex container too -->
    
    <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>

要使用https://codepen.io/anon/pen/xEqQVg

的Codepen

修改

第三个选项，float + display：table，bg通过faux column绘制。 这意味着将左右列放在中间容器的前面。 

.container{
	background-color:#42a5f5;
  margin:1em 0;
  text-align:center;
  font-size:20px;
  line-height:30px;
  text-shadow:0 0 1px gray;
}
.bg-blue {
  width:33%;/* whatever how many of those ? */
	background-color:#42a5f5;
	color:#ffffff;
}
.float-l {
  float:left;
  margin-right:-15px;/* cause of border-spacing */
}
.float-r {
  float:right;
  margin-left:-15px;/* cause of border-spacing */
}
.child-container {
  display:table;
  table-layout:fixed;/* suppose to spray cells evenly where no width is set to cells */
  background:linear-gradient(to left,#42a5f5 15px, transparent 15px),linear-gradient(to right,#42a5f5 15px, transparent 15px) white;/* reproduce blue bg part on white for both sides */
  width:calc(34% + 30px);
  margin:auto;
  border-spacing:15px 0;
}
.bg-green{
  display:table-cell;
	background-color:#66bb6a;
  color:#ffffff;
}
<div class="container">
  <div class="float-l bg-blue">blue left</div>
	<div class="float-r  bg-blue">blue right</div>
	<div class="child-container">    
    <div class=" bg-green">green 1</div>   
  </div>
</div>
<div class="container">
  <div class="float-l bg-blue">blue left</div>
	<div class="float-r  bg-blue">blue right</div>
	<div class="child-container">    
    <div class=" bg-green">green 1</div>
		<div class=" bg-green">green 2</div>   
  </div>
</div>
<div class="container">
  <div class="float-l bg-blue">blue left</div>
	<div class="float-r  bg-blue">blue right</div>
	<div class="child-container">    
    <div class=" bg-green">green 1</div>
		<div class=" bg-green">green 2</div>
		<div class=" bg-green">green 3</div>   
  </div>
</div>
<div class="container">
  <div class="float-l bg-blue">blue left</div>
	<div class="float-r  bg-blue">blue right</div>
	<div class="child-container">    
    <div class=" bg-green">green 1</div>
		<div class=" bg-green">green 2</div>
		<div class=" bg-green">green 3</div>    
    <div class=" bg-green">green 4</div>    
  </div>
</div>

codepen https://codepen.io/anon/pen/qaAvjX

答案 2 :(得分：1)

你可以将它添加到CSS中，它应该可以工作（测试）：

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

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

已编辑的代码段：

＆＃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%;
}
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

只需更换＆＃34; 3＆＃34;无论您拥有多少列，都可以根据需要更改边距值。

带有负边距的版本

稍微改变标记（与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);
}

＆＃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% / (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;
＆＃13;

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

答案 3 :(得分：1)

＆＃13;
＆＃13; 
.container{
 display:flex;
  
  
  
}
.container > div{
  flex-grow:1
}
[class|="col"] {
    display:inline-block;
    vertical-align: top;
    position:relative;
    font-size:20px;

}
.col-1-3{
	
}
.col-2-3{
	
}
.col-1{
	
}
.bg-blue{
	background-color:#42a5f5;
	color:#ffffff;
}
.bg-green{
	background-color:#66bb6a;
  color:#ffffff;
}

.bg-green+ .bg-green{ margin-left:20px}
＆＃13; 
<div class="container">
  <div class="bg-blue">blue left</div>


  <div class=" bg-green">green 1</div>
  <div class=" bg-green">green 2</div>
  <div class=" bg-green">green 3</div>
  


  <div class=" bg-blue">blue right</div>
</div>
＆＃13;
＆＃13;
＆＃13;

这样的东西？ 这是使用flexbox布局。如果你想要更多的浏览器兼容性，那么我认为一个好的选择就是使用任何css框架。

相关问题
最新问题