同じ高さの動的div間のスペース

Question

同じ高さの2つのdivを作成し、それらの間にスペースを入れたいと思います。 float:leftとテクニックでは、高さのない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> 

そして、これは私が欲しいものです：

感謝。あなたはCSS border-spacingを使用することができます

Answer 1

フレキシボックスを行うことができ

.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

：

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