如何使3个div彼此并排，以使其位于底部和顶部div之间？

Question

我希望3个div彼此并排对齐，以便它们位于底部和顶部div之间。 将所有3个div浮动到左侧时，它们将被推到周围div的底部。 如果我将所有其他div浮动，则会在顶部留下巨大的空白。

这些div的左边还有另一个div，它们具有css clear:left 。 删除此选项后，所有div都将在页面顶部彼此浮动。

对齐div周围是否有替代路线？ 还是我做错了什么？

Answer 1

我不知道您是否对Bootstrap之类的响应式CSS框架有任何疑问，但是如果您不介意使用它（或其中的某些CSS）：

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

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

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

Answer 2

我的猜测是您需要给底部的div clear: left移动，以便它不会移到三个浮动div上方。

有关成功完成此操作的示例，请参见“一个真实布局 ”。