html - 为什么我的 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>