html – 如何将3个div对齐到页面的顶部中间和底部？

概述我需要将3个div对齐到网页的顶部,中间和底部以下是我当前的代码. JS Fiddle <div class="container"> <div class="logo"> My Logo </div> <div class="nav"> My Nav </div> <div class="base"> Base 我需要将3个div对齐到网页的顶部,中间和底部以下是我当前的代码.

JS Fiddle

<div >    <div >        My logo    </div>    <div >        My Nav    </div>    <div >       Base    </div>   </div>

我尝试过使用table / table-cell方法,但每个部分并排放置.

需要修复容器,导航应垂直对齐.

任何想法都是这样,logo div位于顶部,nav div位于中间,base div位于底部？

解决方法 您可以使用CSS表格,我添加了一个< div>每个街区.

jsfiddle

HTML,body {  height: 100%;  margin: 0;}.container {  background: gold;  wIDth: 100%;  height: 100%;  display: table;}.container .row {  display: table-row;}.container .cell {  display: table-cell;}.logo .cell {  vertical-align: top;}.nav .cell {  vertical-align: mIDdle;}.base .cell {  vertical-align: bottom;}

<div >  <div >    <div >My logo</div>  </div>  <div >    <div >My Nav</div>  </div>  <div >    <div >Base</div>  </div></div>

您也可以使用flexBox布局.

jsFiddle

body {  margin: 0;}.container {  background: gold;  height: 100vh;  display: flex;  flex-direction: column;  justify-content: space-between;}

<div >  <div >logo</div>  <div >Nav</div>  <div >Base</div></div>

总结

以上是内存溢出为你收集整理的html – 如何将3个div对齐到页面的顶部中间和底部？全部内容，希望文章能够帮你解决html – 如何将3个div对齐到页面的顶部中间和底部？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。