Question

我想创建两个具有相同高度的div并在它们之间放置一个空格。 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>

这就是我想要的：

感谢。

Answer 1

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>

Answer 2

您可以使用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>

Answer 3

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

Answer 4

你需要这样吗

您可以引用链接：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;
}

高度相同的动态div之间的空格

4 个答案: