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

连续一个div的内容会推动其他Div

1 个答案: