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，以便它们“浮动”在一起。

我的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代码here中阅读有关inline-block和更多详细信息，例如IE7修复和间距。

Answer 2

你是否愿意使用float：left而不是display：inline-block for inside divs？

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

设置内联块div以忽略换行符

2 个答案: