Html 将内联块divs设置为忽略换行符

我有三个div并排使用

display:inline block

如果div为空，则它们位于同一水平面

只要我在最左侧/第一个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>

只需添加：

 vertical-align: top;

---

您可以阅读有关

内联块

和一些更多详细信息，如html代码中的IE7固定和间距。

您是否愿意对内部div使用float:left而不是display:inline块

---

我能想到的另一个解决方案是创建一个带有float:left或display:table的类，并将其应用于段落标记。

我从这开始，但我不能轻松地将其居中对齐。

 vertical-align: top;