空間與高度相同

我想用相同的高度創建兩個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

空間與高度相同

回答

相關問題