html - css 和 float div，这样它们就不会破坏网格

Question

我一直在努力寻找正确的解决方案。

假设你有 6 个 div，所有不同的高度变化的内容等等。

在 1080p 屏幕的响应式设计中，所有 6 个 div 都适合一行......但是当页面变得足够小时，它会变为每行 3 个。

问题是说第二个 div 是 1、2、3 div 中最高的，然后 4、5 和 6 div 移出了位置

这意味着第 4 个 div 最终与第一个 div 不一致(按列排列)，您将如何做到这一点？无论如何确保内容最终出现在正确的位置。

<style>
 #maincontent { width: 100%; }
 .content{ width: 33%; float:left;}
</style>

<div id="maincontent"> 
 <div class="content">a</div>
 <div class="content">I have a lot more content so i'm taller</div>
 <div class="content">a</div>
 <div class="content">I try to float left but can't get inline with the first child</div>
 <div class="content">a</div>
 <div class="content">a</div>
</div>

Answer 1

您可以使用 clear属性:

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.

Values other than 'none' potentially introduce clearance. [...] It is used to push the element vertically past the float.

.content:nth-child(3n + 1) {
  clear: left;
}

.content {
  width: 33.3%;
  float: left;
}
.content:nth-child(3n + 1) {
  clear: left;
}

<div id="maincontent">
  <div class="content">a</div>
  <div class="content">I have a lot more content so i'm taller</div>
  <div class="content">a</div>
  <div class="content">I try to float left but can't get inline with the first child</div>
  <div class="content">a</div>
  <div class="content">a</div>
</div>

或者，还有令人惊叹的 flexbox:

#maincontent {
  display: flex; /* Magic begins */
  flex-wrap: wrap; /* Multiline */
}
.content { width: 33.3%; }

#maincontent {
  display: flex; /* Magic begins */
  flex-wrap: wrap; /* Multiline */
}
.content {
  width: 33.3%;
}

<div id="maincontent">
  <div class="content">a</div>
  <div class="content">I have a lot more content so i'm taller</div>
  <div class="content">a</div>
  <div class="content">I try to float left but can't get inline with the first child</div>
  <div class="content">a</div>
  <div class="content">a</div>
</div>