行垂直对齐问题

cloverprince

浏览: 129465 次
性别:
来自: 北京

最近访客更多访客>>

麦兜猪

fengguoying

heipark

aleiliuwei

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML CSS 上对齐

这是一个画廊页面，一行一行地显示图片和描述。

HTML如是写：

<!DOCTYPE html>
<html>
    <head>
        <title>Gallery</title>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="gallery.css" />
    </head>
    <body>
        <h1>Gallery</h1>
        <ul class="gal">
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">简单标签</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">复杂标签</a>
                <a href="#a">复杂标签</a>
                <a href="#a">复杂标签</a>
                <a href="#a">复杂标签</a>
                <a href="#a">复杂标签</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">有时候你会遇到很复杂的标签，<br />可能会有很多行，<br />就像这样。</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">简单标签</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">简单标签</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">简单标签</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">简单标签</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">简单标签</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">简单标签</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">简单标签</a>
            </div>
            </li>
        </ul>
    </body>
</html>

CSS如是写：

.gal {
    width: 900px;
    background: #ffccff;
}

.gal li {
    display: inline-block;
    width: 200px;
    border: 1px solid #f00;
    background: #ccffcc;
}

得到如下效果：

配色虽丑陋，但可以看见每个盒子占据的空间。

于是发现问题：理想的结果是，图片按上边沿对齐。

解决的方法自然是使用css的vertical-align属性。但是如何使用呢？

W3C的CSS2.1 Recommendation如是说：

引用

10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

As described in the section on inline formatting contexts, user agents flow inline-level boxes into a vertical stack of line boxes. The height of a line box is determined as follows:

   1. The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'. (See "Calculating heights and margins" and the height of inline boxes in "Leading and half-leading".)
   2. The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline (i.e., the position of the strut, see below).
   3. The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under 'line-height' below.)

来自： http://www.w3.org/TR/CSS21/visudet.html#line-height

大意是说，以inline方式处理的一堆元素，包括display:inline或者inline-block或者inline-table的，会被排列成一行一行，每行是line-box，每个line-box以某种方式计算其行高。

注意第2条第一句（斜体），尤其是“their”这个单词（粗体）。line-box中，每个元素的垂直对齐方式，由该元素自己的vertical-align属性决定，而不是容器的。

所以，要让上例中，画廊中每幅画以上端对齐，就要设定每个<li>的vertical-align属性。于是，css要改成这样：

.gal {
    width: 900px;
    background: #ffccff;
}

.gal li {
    vertical-align: top;
    display: inline-block;
    width: 200px;
    border: 1px solid #f00;
    background: #ccffcc;
}

现在的效果是这样：