0

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

如果 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;
}
4

2 回答 2

1

只需添加：

 vertical-align: top;

您可以在此处阅读inline-blockIE7 修复和 html 代码中的间距等更多详细信息。

于 2013-01-27T19:31:22.093 回答
0

你愿意使用 float: left 而不是 display: inline-block 用于内部 div 吗？

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

于 2013-01-27T19:37:58.317 回答