Пространство между динамическими divs с одинаковой высотой

Question

Я хочу создать две div s с одинаковой высотой и разместить между ними пространство. Техника float:left и float:right создает невальные разнесенные div. Итак, я обыскал в Интернете и решил использовать технику table-cell. Но это не позволяет мне использовать margin на ячейках и выставляет некоторые странные пространства, которые я не могу контролировать.

Вот иерархия образец моего кода:

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