Question

我有一个可扩展的div网格，我想保持整洁的网格。通常它们都具有相同的高度，因此网格看起来很整洁。但是，可能会有一些较高的div，从而打破网格。

如果LEFT侧的div太高，其底边比相邻div的下边缘略低（图中标有红线），我会得到不需要的垂直空间，如下图所示（1）。基本上我想允许一个高大的div溢出到它和div之间的边缘，同时保持其余的div甚至。

如果右侧的方框太高，左侧几乎没有未使用空间的方框（2）。我怎么能用更多的div填充那个空间？

关于如何解决这个问题的任何想法？

目前所有蓝色框都是使用Bootstrap col-md-6类的div：

<div class="row">
    <div class="col-md-6">...</div>
    <div class="col-md-6">...</div>
    <div class="col-md-6">...</div>
    <div class="col-md-6">...</div>
    <div class="col-md-6">...</div>
    ...
</div>

Answer 1

一个棘手的部分是你要求稍微太高的元素流入下一行的边缘，而那些太高的那些仍然需要向下推动该边距以避免重叠下一行行。

没有这个要求，简单的flexbox就可以。（此示例中的彩色块是比平时更高但是足够短以适应边距的那个）：

＆＃13;

* {box-sizing: border-box}

.row {
  display:flex;
  flex-wrap: wrap;

}

.foo {
  background-color: #CCC;
  border: 1px solid;
  height: 50px;
  margin: 5px 2%;
  flex: 0 1 46%;
}

.slightlytaller {height: 59px; background-color: #CC0;}
.muchtaller {height: 99px;}
.shorter {height: 30px;}

＆＃13;

<div class="row">
  <div class="foo">...</div>
  <div class="foo">...</div>
  <div class="foo slightlytaller">...</div>
  <div class="foo">...</div>
  <div class="foo">...</div>
  <div class="foo muchtaller">...</div>
  <div class="foo">...</div>
  <div class="foo shorter">...</div>
  <div class="foo">...</div>
  <div class="foo">...</div>

</div>

＆＃13;

为了满足这一要求，我们需要对您的HTML进行一些小改动：＆＃34; margin＆＃34;元素之间由min-height的容器元素模拟，允许可见元素填充＆＃34; margin＆＃34;必要时。这适用于略高的元素，但这意味着太高的元素最终没有（模拟）底部边缘。

＆＃13;

* {box-sizing: border-box}

.row {
  display:flex;
  flex-wrap: wrap;
}

.container {
  min-height: 60px;
  margin: 0 2%;
  flex: 0 1 46%;
}

.foo {
  background-color: #CCC;
  border: 1px solid;
  height: 50px;
}

.slightlytaller {height: 59px; background-color: #CC0;}
.muchtaller {height: 99px;}
.shorter {height: 30px;}

＆＃13;

<div class="row">
  <div class="container"><div class="foo  slightlytaller">...</div></div>
  <div class="container"><div class="foo">...</div></div>
  <div class="container"><div class="foo">...</div></div>
  <div class="container"><div class="foo muchtaller">...</div></div>
  <div class="container"><div class="foo">...</div></div>
  <div class="container"><div class="foo shorter">...</div></div>
  <div class="container"><div class="foo slightlytaller">...</div></div>
  <div class="container"><div class="foo">...</div></div>
  <div class="container"><div class="foo">...</div></div>
  <div class="container"><div class="foo">...</div></div>
</div>

＆＃13;

您可以通过同时使用这两种技术来妥协：min-height用于大多数可见＆＃34;边距＆＃34;的容器，加上容器本身的一些真实margin以便 - 太高的元素在下一行之前仍然至少有一些间距。但个人而言，我选择普通的flexbox方法 - 它是最简单的方法，而且我认为它在视觉上比您想要的设计更受欢迎。

创建一个可变大小的div的偶数网格

1 个答案: