Question

前两个完美对齐，但第三个刚刚赢了。 ..这里有人能告诉我我做错了什么吗？我昨晚被困在这几个小时，今天早上，通过查看其他类似的问题，我能够让前两个div对齐，但第三个不管是什么。它下面有一个完全不同的div，它继续进入内部而不是与其他两个对齐。

HTML＆amp; CSS

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

如果您设置一些百分比宽度和其他绝对数字宽度，则您的设计不适用于所有屏幕尺寸。你必须做很多数学运算。我建议你使用所有宽度百分比，这样它们就能在所有屏幕上运行。

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

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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: