网格对齐问题

Question

我有一个页面有一个5列相等的网格;每列有n盒不同的高度。

所以这个网格的底部全部被切断，每一行都以不同的高度结束。

"1"

和CSS

<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>

我后来想再次使用

向这些行添加更多的框（AJAX）

.row {
   display: inline;
   float: left;
   width:20%
}

问题是这些新盒子并不像我期望的那样恰好适合每一行，而是将它们排在最前面，与前一行的最低行对齐。

我用什么CSS绕过了这个问题？

Answer 1

如果您不介意高度不同，请使用display：inline-block和vertical-align：top而不是float left。这个由每个“行”元素的不同高度引起。

.row{
   display: inline-block;
   vertical-align: top;
   width:20%;
}

您还可以考虑使用flex或javascript使每个元素的高度相同，在其中，检查哪个div具有最高高度并将其应用于所有元素。

如果您希望它具有不同的高度并希望它填补空白，请参阅此问题

CSS Floating Divs At Variable Heights

Answer 2

如果您在CSS中寻找“砌体”布局，可以使用CSS列

.rows {
  column-count: 4;
  column-gap: 1em;
}

.row {
  background-color: #eee;
  display: inline-block;
  margin: 0 0 1em;
  width: 100%;
}

<div class="rows">
  <div class="row">1</div>
  <div class="row">2</div>
  <div class="row">3</div>
  <div class="row">asdf<br> aasdf
  </div>
  <div class="row">4</div>
  <div class="row">5</div>
  <div class="row">2<br>lines</div>
  <div class="row">7</div>
  <div class="row">two<br> lines</div>
  <div class="row">8</div>
  <div class="row">9</div>
  <div class="row">1</div>
  <div class="row">2</div>
  <div class="row">3</div>
  <div class="row">asdf<br> aasdf
  </div>
  <div class="row">4</div>
  <div class="row">two<br> lines</div>
  <div class="row">6</div>
  <div class="row">7<br>lines</div>
  <div class="row">7.5</div>
  <div class="row">8</div>
  <div class="row">9</div>
  <div class="row">1</div>
  <div class="row">2</div>
  <div class="row">3</div>
</div>

Answer 3

＆＃13;

＆＃13;

.multiple-column{
  list-style: none;
  padding: 0;

  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
}
.multiple-column li{
  background: gray;
  margin-bottom:10px;
}

＆＃13;

<ul class="multiple-column">
  <li style="height: 100px">A</li>
  <li style="height: 200px">B</li>
  <li style="height: 150px">C</a></li>
  <li style="height: 120px">D</li>
  <li style="height: 120px">E</li>
  <li style="height: 60px">F</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

浏览器需要支持CSS3。