Question

我目前正在使用此布局：

<div class="row">
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <!-- and on and on -->
</div>

每列中的内容大小可变，这会在浏览器中引起奇怪的流程。类似于this。

如您所见，第4,5,6列位于新的＆＃34;行＆＃34;中。第7列和第8列跳过整列。这些行为是不可取的，相反，我希望列像so一样流动。

在这种情况下，每一列都会拥抱它所在的列。我还没有找到解决这个问题的方法。我调查了clearfix。它似乎没有帮助这种情况，因为它只是将一列移动到换行符。

Answer 1

您正在寻找的东西通常被称为Pinterest风格的网格。

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

CSS

* {
  box-sizing: border-box;
  font-size: 22px;
  font-family: "Helvetica", sans-serif;
  color: #333333;
}

.container {
  background-color: #f2f2f2;
  padding: 10px;
  border: 2px solid #CCCCCC;
  max-width: 900px;
  margin: 0 auto;
  height: 470px;
  display: flex;
  flex-flow: column wrap; /* Shorthand – you could use ‘flex-direction: column’ and ‘flex-wrap: wrap’ instead */
  justify-content: flex-start;
  align-items: flex-start;
}

.item {
  background-color: orange;
  height: 150px;
  width: 31%;
  margin: 1%;
  padding: 10px;
}

.item:nth-child(2) {
  background-color: pink;
  height: 250px;
}

.item:nth-child(3) {
  height: 190px;
}

.item:nth-child(4) {
  background-color: aqua;
  height: 220px;
}

演示：https://codepen.io/michellebarker/pen/zvxpoG

或者替代方案：https://bootsnipp.com/snippets/featured/pinterest-like-responsive-grid。或search for more examples

Bootstrap 3网格：溢出列行为

1 个答案: