html - 设置内联 block div 以忽略换行符

Question

我有三个并排使用 display:inline-block 的 div .

如果 div 为空，则它们处于同一水平高度。

一旦我添加<p>标签和一些换行符 ( <br/> ) 到最左边/第一个 div，其余的向下移动。

如果我在第二个框中放入足够的内容，第三个框会向下移动更多。

我的盒子 HTML:

<div class="main-box" id="about">
    <h1>About</h1>
    <p>This box has one paragraph of text, with line breaks</p>
</div>

<div id="login-container">
    <div class="main-box" id="login">
        <h1>Login</h1>
        <p>Already a member? Sign in and see your stuff!</p>
    </div>
    <div class="main-box" id="signup">
        <h1>Signup</h1>
        <p>Create an account by filling out this form.</p>
    </div>
</div>

最后两个框被分组在一个 div 中，以便它们“ float ”在一起。

我的 CSS:

div.main-box {
    text-align: left;
    display: inline-block;
    border: 10px solid red;
    margin: 20px;
    padding: 25px;
    border-radius: 50px;
    width: 400px;
    height: 400px;
}
div#login-container {
    display: inline-block;
}

Answer 1

只需添加:

 vertical-align: top;

您可以在 html 代码中阅读有关 inline-block 和一些更多详细信息，例如 IE7 修复和间距 here .