垂直对齐：底部；不适用于显示：inline-block；元素

Question

首先，我的 HTML 标记：

<nav>
  <section class="navabout">
    ABOUT
  </section><section class="navphotography">
  PHOTOGRAPHY
  </section><section class="navdesign">
  DESIGN
  </section>
</nav>

还有我的 CSS 代码：

nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
nav > section{
    width: 33%;
    height: 100%;
    display:inline-block; /*http://stackoverflow.com/q/11805352/1584286*/

    font-size: 60px;
    font-family: 'Bebas Neue', arial, helvetica, sans-serif;
}

nav > section.navabout{
    background: url(http://eofdreams.com/data_images/dreams/face/face-01.jpg) no-repeat center; 
    background-size: cover;

    text-align: left;
}
nav > section.navphotography{
    background: url(http://www.digitaltrends.com/wp-content/uploads/2010/02/digital-camera-buying-guide-header.jpg) no-repeat center; 
    background-size: cover;

    text-align: center;
    vertical-align: text-bottom;
}
nav > section.navdesign{
    background: url(http://media.peugeot.com/images/backgrounds/design/concept-peugeot-design-lab.jpg) no-repeat center; 
    background-size: cover;

    text-align: right;
}

问题

我想要 Photography 字体贴在该部分的底部。所以我找到了 CSS 代码 vertical-align 并阅读了 CSS-Tricks 的 this 文章。有这样写的：

为了使它起作用，需要单独为元素设置基线。如 inline（例如 , ）或 inline-block（例如由 display 属性设置）元素。

所以它应该在我的代码中工作，然后 CSS-Tricks 也说：

text-bottom - 将元素底部与父元素字体底部对齐。

但奇怪的是，其他两个部分的字体与背景图像一起粘在底部（因此整个部分标签都粘在底部）。

我想，也许它不会因为父元素字体而起作用。所以我将值设置为bottom。但现在什么都没有改变。

你能帮我让摄影部分的字体粘在底部吗（只有字体！）

PS：是的，我知道，这个 CSS 在 IE6 和 7 中无法使用，但我的整个网站只能在现代浏览器中使用。

Codepen Demo for you

Answer 1

另一种方法如何：

FIDDLE

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'>
            <div>ABOUT</div>
        </div>
        <div class='cell'>
            <div>PHOTOGRAPHY</div>
        </div>
        <div class='cell'>
            <div>DESIGN</div>
        </div>
    </div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
}
.table {
    display:table;
    width:100%;
    height:100%;
    font-size: 60px;
    font-family:'Bebas Neue', arial, helvetica, sans-serif;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    text-align: left;
    position:relative;
}
.cell:nth-child(1) {
    background:url(http://eofdreams.com/data_images/dreams/face/face-01.jpg) no-repeat center;
    background-size: cover;
}
.cell:nth-child(2) {
    background:url(http://www.digitaltrends.com/wp-content/uploads/2010/02/digital-camera-buying-guide-header.jpg) no-repeat center;
    background-size: cover;
}
.cell:nth-child(3) {
    background:url(http://media.peugeot.com/images/backgrounds/design/concept-peugeot-design-lab.jpg) no-repeat center;
    background-size: cover;
}
.cell > div {
    position:absolute;
    bottom:0;
}