Question

在页脚内部制作4个宽度相等的列。

HTML：

<footer>
    <div id='one'>
        <ul>
            <li>list item one</li>
            <li>list item two</li>
            <li>list item three</li>
        </ul>
    </div>
    <div id='two'></div>
    <div id='three'></div>
    <div id='four'></div>
</footer>

CSS：

footer {
    width: 800px;
    font-size: 0;
}

footer div {
    width: 25%;
    height: 200px;
    display: inline-block;
    font-size: 20px;
}

#one {
    background: red;
}

#two {
    background: green;
}

#three {
    background: yellow;
}

#four {
    background: blue;
}

一切看起来很好，四个不同颜色的盒子均匀地分布在页脚上，但是在我添加了ul之后，第一个div现在没有与其余部分垂直对齐。我确保考虑到任何用户样式表样式，但这并不重要。

http://jsfiddle.net/5xduumae/

Answer 1

只需在CSS中将vertical-align:top添加到footer div。

更新了小提琴here。

Answer 2

在页脚div上使用float:left;。更新了内部的明确课程。

Fiddle updated

DIV中的UL打破了垂直对齐

2 个答案: