동일한 높이를 가진 동적 div 사이의 공간

Question

동일한 높이로 두 개의 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

인 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

:

.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

당신이 좋아해야합니까 당신은 링크를 참조 할 수 있습니다

이 : 당신의 CSS는 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; 
}