为什么我的 div 不能全部水平对齐？

Question

前两个完美对齐，但第三个不会。这里有人能告诉我我做错了什么吗？昨晚我被困了几个小时，今天早上，通过查看这里的其他类似问题，我能够让前两个div 对齐，但无论如何第三个都不会。它下面有一个完全不同的div，它一直在里面，而不是上升以与其他两个对齐。

HTML 和 CSS

.framebox:after {
  content: "", ;
  clear: both;
  display: table;
}
.frame1 {
  float: left;
  width: 300px;
  height: 300px;
  background-color: white;
  margin-left: 40px;
  margin-right: 5px;
}
.frame2 {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background-color: white;
}
.frame3 {
  width: 30%;
  height: 300px;
  background-color: white;
  margin-left: 5px;
  margin-right: 40px;
  float: right;
}

<div class="framebox">
  <div class="frame1">
    <h2> dfgdfg</h2>
  </div>
  <div class="frame2">
    <h2> dfgdfg </h2>
  </div>
  <div class="frame3">
    <h2> dfgdfg </h2>
  </div>
</div>

Answer 1

第一。将它们全部设置为向左浮动，因此将尝试向左打包，直到它们填满页面宽度。

如果按百分比设置某些宽度，以绝对数字设置其他宽度，则您的设计不适用于所有屏幕尺寸。你必须做很多数学。我建议您使用所有宽度百分比，这样它们将在所有屏幕上表现。

在您的情况下，它们只会在所有元素的宽度不大于屏幕宽度的屏幕中与顶部对齐。

我更改了背景颜色，以便我们看得更清楚。

obs：如果你知道最小屏幕尺寸，这必须起作用，你可以使用绝对数字。您必须使div 的边距适合考虑的最小屏幕尺寸。

.framebox:after {
  content: "", ;
  clear: both;
  display: table;
}
.frame1 {
  background-color: yellow;
  float: left;
  width: 33%;
  height: 300px;
 // margin-left: 40px;
 // margin-right: 5px;
}
.frame2 {
  background-color: blue;
  float: left;
  margin: 0 auto;
  width: 33%;
  height: 300px;
}
.frame3 {
  background-color: green;
  width: 33%;
  height: 300px;
 // margin-left: 5px;
 // margin-right: 40px;
  float: left;
}

<div class="framebox">
  <div class="frame1">
    <h2> dfgdfg</h2>
  </div>
  <div class="frame2">
    <h2> dfgdfg </h2>
  </div>
  <div class="frame3">
    <h2> dfgdfg </h2>
  </div>
</div>