网格视图（相同宽度/不同高度） - 3列| CSS

Question

我尝试使用css制作包含3列的网格视图。 我有2列系统使用以下代码，但我似乎无法正确使用3列：

＆＃13;

＆＃13;

#container{background-color:#aaa;margin: 0 auto;height:500px; width: 200px;}
.box{background-color:white;
  border:1px solid black;
  margin: 2%;
  width:45%;
  display:block;
  float:left;
  box-sizing: border-box;
}
.box:nth-child(2n + 0) { float: right; }

＆＃13;

<div id='container'>
  <div class='box' style="height:70px; background-color: red;">1</div>
  <div class='box' style="height:130px; background-color: grey;">2</div>
  <div class='box' style="height:90px;">3</div>
  <div class='box' style="height:86px; background-color: orange;">4</div>
  <div class='box' style="height:110px; background-color: green;">5</div>
  <div class='box' style="height:40px;">6</div>
</div>

＆＃13;

＆＃13;

＆＃13;

这里是jsfiddle： https://jsfiddle.net/jfnvt9o3/

有没有办法只用css来实现以下目标，若然，怎么做？

Answer 1

如果您可以重新排序HTML，则可以使用多列的解决方案。在其他情况下，我认为没有JavaScript是不可能的。

menu view controller

#container {
  background-color: #aaa;
  margin: 0 auto;
  height: 500px;
  width: 500px;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -moz-column-gap: 10px;
  -webkit-column-gap: 10px;
  column-gap: 10px;
}

.box {
  background-color: white;
  border: 1px solid black;
  width: 100%;
  margin: 10px 0;
  display: inline-block;
  box-sizing: border-box;
}

Answer 2

试试这个javascript库 - 没有合适的（跨浏览器）css解决方案：

http://masonry.desandro.com/

您也可以尝试使用css列：

https://css-tricks.com/almanac/properties/c/columns/

Answer 3

你能不能让同一行的div具有相同的高度？如果它们具有相同的高度（与同一行的div相同），它应该如下所示：

＆＃13;

＆＃13;

#container {
  background-color: #aaa;
  margin: 0 auto;
  height: 500px;
  width: 200px;
}
.box {
  background-color: white;
  border: 1px solid black;
  margin: 2%;
  width: 45%;
  display: block;
  float: left;
  box-sizing: border-box;
}
.box:nth-child(2n + 0) {
  float: right;
}

＆＃13;

<div id='container'>
  <div class='box' style="height:130px; background-color: red;">1</div>
  <div class='box' style="height:130px; background-color: grey;">2</div>
  <div class='box' style="height:90px;">3</div>
  <div class='box' style="height:90px; background-color: orange;">4</div>
  <div class='box' style="height:110px; background-color: green;">5</div>
  <div class='box' style="height:110px;">6</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

还有一种方法可以使用 flexboxes （虽然您也可以在没有灵活盒的情况下实现它）但是您需要稍微调整一下HTML： DEMO < / p>

<div id='container'>
  <div class="column">
    <div class='box' style="height:70px; background-color: red;">1</div>
    <div class='box' style="height:86px; background-color: orange;">4</div>
  </div>
  <div class="column">
    <div class='box' style="height:130px; background-color: grey;">2</div>
    <div class='box' style="height:110px; background-color: green;">5</div>
  </div>
  <div class="column">
    <div class='box' style="height:90px;">3</div>
    <div class='box' style="height:40px;">6</div>
  </div>
</div>

<强> CSS

#container{background-color:#aaa;margin: 0 auto;height:500px; width: 200px; display:flex;}
.box{background-color:white;
  border:1px solid black;
  margin: 2%;
  width:94%;
  display:block;
  box-sizing: border-box;
}
.column{
  display:flex;
  flex-direction:column;
  width:33%;
}