html - 连续一个 div 的内容将其他 div 向下推

Question

我有四个连续的列，但是，当我向这些列添加内容时，每个后续列都会在页面上被下推。我不确定如何解决这个问题。

你可以在这里更好地理解我的问题，我增加了盒子的大小，并将其减少到两个盒子，而不是四个。 http://jsfiddle.net/x5zDj/

<div class="row">
        <div class="column">
            <h1>Latest News</h1>
            <p>Lorem</p>
            <p>Lorem</p>
        </div>
        <div class="column">
            <h1>Application</h1>
        </div>
    </div>

我确定我忽略了一些愚蠢的事情......

Answer 1

使用inline-block时，您需要将vertical-align设置为您想要的属性。

在您的情况下，将其添加到您的 .column CSS 如下更正了问题:

.column {
    width: 460px;
    height: 100%;
    display: inline-block;
    vertical-align: top; /* Adding this causes them to line up evenly across the top */
    border: 1px solid #000;
    padding: 15px;
}

Fiddle