Question

我希望3个div彼此对齐，以便它们位于底部和顶部div之间。当向左浮动所有3个div时，它们被推到周围div的底部。如果我漂浮所有其他div，它会留下一个巨大的差距。

这些div的左边还有另外很多div，它们都有css clear:left。当删除它时，所有的div都会在页面顶部相互浮动。

是否存在围绕对齐div的替代路线？或者我只是做错了什么？

Answer 1

我不知道你是否有任何反对像Bootstrap这样的响应式css框架，但是如果你不介意使用它（或者它的某些css）：

＆＃13;

.top {
  background-color: red;
  height: 200px;
}
.middle {
  background-color: blue;
  height: 200px;
  border-style: dotted;
  box-sizing: border-box;
}
.bottom {
  background-color: yellow;
  height: 200px;
}
.col-md-12,
.col-sm-12,
.col-xs-12 {
  width: 100%;
  float: left;
}
.col-md-4,
.col-sm-4,
.col-xs-4 {
  width: 33.33333%;
  float: left;
}

＆＃13;

<div class="top col-md-12 col-sm-12 col-xs-12">
</div>
<div class="middle col-md-4 col-sm-4 col-xs-4"></div>
<div class="middle col-md-4 col-sm-4 col-xs-4"></div>
<div class="middle col-md-4 col-sm-4 col-xs-4"></div>
<div class="bottom col-md-12 col-sm-12 col-xs-12">
</div>

＆＃13;

box-sizing: border-box;只是为了防止边框溢出最后div到下一行。

Answer 2

我的猜测是你需要给出底部div clear: left，这样它就不会超过你的三个浮动div。

有关成功完成此操作的示例，请参阅The One True Layout。

如何将3个div对齐，以便它们位于底部和顶部div之间？

2 个答案: