Question

我需要将3个div对齐到网页的顶部，中间和底部以下是我当前的代码。

<div class="container">
    <div class="logo">
        My Logo
    </div>
    <div class="nav">
        My Nav
    </div>
    <div class="base">
       Base
    </div>   
</div>

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

需要修复容器，导航应垂直对齐。

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

Answer 1

您可以使用CSS表格，我为每个块添加了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; }。

<强> jsfiddle

＆＃13;

<div class="container">
  <div class="row logo">
    <div class="cell">My Logo</div>
  </div>
  <div class="row nav">
    <div class="cell">My Nav</div>
  </div>
  <div class="row base">
    <div class="cell">Base</div>
  </div>
</div>

＆＃13;

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

＆＃13;

你也可以使用flexbox布局。

<强> jsFiddle

＆＃13;

<div class="container">
  <div class="row logo">Logo</div>
  <div class="row nav">Nav</div>
  <div class="row base">Base</div>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

我相信我创造了你的解决方案。

<强> HTML：

<div class="container">
<div class="logo">
    My Logo
</div>
<div class="nav">
    My Nav
</div>
<div class="base">
    Base
</div>

<强> CSS：

.container{
    width: 200px;
    height: 100%;
    background: gold;
    position: fixed;
}

.logo{
    background: blue;
    width:100%;
}

.nav{
    background: tan;
    width: 200px;
    position: fixed;
    top: 50%;
    transform: translateY(-50%); /*nudge the div back to the center*/
}

.base{
    background: aqua;
    width:200px;
    position: fixed;
    bottom: 0;
}

JSFiddle view of the output

我为基础和导航创建了固定位置以进行垂直对齐。

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

2 个答案: