vertical-align：bottom;不适用于显示：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文章。写有以下内容：

  

为了使其工作，需要将元素单独设置为基线。如在内联（例如）或内联块（例如由显示属性设置）元素。

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

  

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

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

我想，也许因为父元素字体而无效。所以我将值设置为bottom。但现在没有任何改变。

你能帮我把摄影部分的字体贴在底部（只有字体！）

PS：是的，我知道，这个CSS在IE6＆amp; 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;
}