空间与高度相同

我想用相同的高度创建两个div S和把它们之间的空间。 float:left和float:right技术创建不等于加权的div。所以，我在网上搜索并决定使用table-cell技术。但它不允许我在细胞上使用保证金并暴露一些我无法控制的奇怪空间。空间与高度相同

这里是我的代码示例层次：

<div class="container"> 
    <div class="left col"> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
    </div> 
    <div class="right col"> 
     <div class="item"></div> 
     <div class="item"></div> 
    </div> 
    </div>

这就是我想要的东西：

感谢。

来源

2016-06-21 doruk

哪里是你的CSS？ –

Flexbox，就可以做到这一点

.container { 
 
    display: flex; 
 
    padding: 1em; 
 
    background: red; 
 
    justify-content: space-between; 
 
} 
 
.col { 
 
    background: pink; 
 
    border: 1px solid grey; 
 
} 
 
.left { 
 
    width: 60% 
 
} 
 
.left .item { 
 
    width: 80%; 
 
} 
 
.right { 
 
    width: 35%; 
 
} 
 
.item { 
 
    height: 50px; 
 
    background: blue; 
 
    margin: 1em; 
 
}

<div class="container"> 
 
    <div class="left col"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    </div> 
 
    <div class="right col"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    </div> 
 
</div>

来源

2016-06-21 11:16:48

这很搞笑，谢谢！ – doruk

@Paulie_D Flexbox将是非常酷的，但不幸的是我还没有与这么多的经验.. –

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

您可以使用CSS border-spacing：

.container { 
 
    border-spacing: 20px 0; 
 
    display: table; 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 
.col { 
 
    display: table-cell; 
 
    background: #000; 
 
}

<div class="container"> 
 
    <div class="left col"> 
 
     <div class="item"></div> 
 
     <div class="item"></div> 
 
     <div class="item"></div> 
 
    </div> 
 
    <div class="right col"> 
 
     <div class="item"></div> 
 
     <div class="item"></div> 
 
    </div> 
 
</div>

来源

2016-06-21 11:16:17

<style> 
    .container{ 
     background:red; 
     height:290px; 
     width:625px; 
    } 
    .col{ 
     height: 225px; 
     width: 280px; 
     margin-top: 14px; 
    } 
    .left{ 
     float: left; 
     background: #008000; 
     margin-left: 13px; 
    } 
    .right{ 
     float: right; 
     background: #FF0; 
     margin-right: 40px; 
    } 
    .item{ 
     background: #00F; 
     height: 50px; 
     width: 200px; 
     margin-top: 5px; 
     margin-left: 5px; 
    } 
    </style> 

    <div class="container"> 
     <div class="left col"> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
     </div> 
      <div class="right col"> 
      <div class="item"></div> 
      <div class="item"></div> 
     </div> 
    </div>

来源

2016-06-21 11:53:34 coder

你需要这样的

你可以参考链接：https://jsfiddle.net/17d80ym3/16/

Html: 
<div class="container"> 
    <div class="left col"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    </div> 
    <div class="right col"> 
    <div class="item"></div> 
    <div class="item"></div> 
    </div> 
</div> 

Css 
.container { 
    display: flex; 
    padding: 1em; 
    background: red; 
    justify-content: space-between; 
} 
. col { 

    border: 1px solid grey; 
} 
.left col { 
    background: green; 
    border: 2px solid yellow; 
} 
.left { 
    width: 60%; 
    background: green; 
} 
.left .item { 
    width: 80%; 
} 
.right { 
    width: 35%; 
    background: yellow; 
} 
.item { 
    height: 50px; 
    background: blue; 
    margin: 1em; 
}

来源

2016-06-21 12:00:46 SMS

空间与高度相同

回答

相关问题