Question

我在彼此旁边有三个div，没有内容，他们对齐完美。然而，一旦我将另一个div放在第一个div中，另一个div（中间和右侧）被向下推。内部div小于他的父母（左边的），所以我不明白为什么它会向下推。

这是全局包装器：

.main-content {
    width: 1100px;
    min-height: 500px;
    margin: auto;
    margin-top: 100px;
}

左边的div：

.left-menu {
    width: 250px;
    height: 100%;
    margin-left: 20px;
    margin-top: 30px;
    background-color: rgba(255, 255, 255, 0.95);
    display: inline-block;
}

中间：

.main {
    width: 500px;
    min-height: 500px;
    background-color: rgba(255, 255, 255, 0.95);
    display: inline-block;
    margin-left: 20px;
}

正确的div：

.right-pane{
    width: 250px;
    margin-left: 15px;
    margin-top: 30px;
    background-color: rgba(255, 255, 255, 0.95);
    display: inline-block;
}

目前他们是上课而不是身份证，但我认为这不应该有所作为？

现在，当我们在左侧菜单中放置如下所示的div时，其他2个被按下：

<div class="leftmenu-item">
    <p class="redtext">This is a quite a long sentence hehehe</p>
    <p class="datetext">Date: 25-07-2013</p>
    <p class="timetext">Time: 13:00</p>
</div>

的CSS：

.leftmenu-item {
    height: 100px;
    width: 200px;
}

段落的其他类只设置字体类型和颜色。

所以整个结构看起来像这样：

<div class="main-content">
    <div class="left-menu">
            <div class="leftmenu-item">
                         <p class="redtext">This is a quite a long sentence hehehe</p>
                         <p class="datetext">Date: 25-07-2013</p>
                         <p class="timetext">Time: 13:00</p>
                    </div>
    </div>

    <div class="main">
        Testy
    </div>

    <div class="right-pane">
        Hello.
    </div>
</div>

我尝试过使用浮点数，但这也不行。如果有人知道解决方案，我会很高兴

Answer 1

将vertical-align:top;添加到这些div。

默认情况下，它们与基线对齐。

Answer 2

这可能是一个错字：

您错过了main

的班级选择器

三个div彼此相邻，内容推动其他人下降

2 个答案: