Question

我只是想在父div中水平对齐3个框。第三个出现在远远低于前两个。我在这里做错了什么？

.parentbox{
  width:1120px;
  padding: 40px 40px 40px 40px;
  align: center;
  height: auto;
}
.box1 {
  float: left;
  width: 23%;
  height: 400px;
  background-color:#f1f1f1;

}
.box2 {
  float: middle;
  width: 23%;
  height: 400px;
  background-color:#f1f1f1;

}
.box4 {
  float: right;
  width: 23%;
  height: 400px;
  background-color:#f1f1f1;

}


<div class="parentbox">
  <div align=center>
    <div class="box1">hello</div>
    <div class="box2">hi</div>
    <div class="box4">hgi</div>
  </div>
</div>

Answer 1

您的CSS代码存在一些缺陷，但导致显示问题的最大缺陷是：

.box2 {
   float: middle;

}

没有float: middle;属性。您需要将它们全部设置为float:left;（或float:right;）或使用完全不同的方法。（比如使用display: table-cell;）

Answer 2

嘿，我简化了您的代码，只使用了三个div的唯一类，并显示它们inline-block，请参阅下面的内容：

＆＃13;

.parentbox {
  width: 1120px;
  padding: 40px 40px 40px 40px;
  align: center;
  height: auto;
}
.box {
  display:inline-block;
  /* vertical-align:top;  you might need this property */
  width: 23%;
  height: 400px;
  background-color: #f1f1f1;
  margin: 5%;
}

＆＃13;

<div class="parentbox">
  <div align=center>
    <div class="box">hello</div>
    <div class="box">hi</div>
    <div class="box">hgi</div>
  </div>
</div>

＆＃13;

Answer 3

http://jsfiddle.net/rishabh66/kLfb2wet/。

将float: left;添加到所有div 在父div中进行水平对齐框。

为什么我的第3个盒子与前两个盒子不对齐？

3 个答案: