1

我有三个相邻的 div，没有内容，它们对齐完美。但是，一旦我将另一个 div 放入第一个 div 中，其他 2 个（中间和右侧）就会被向下推。内部 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;
}

目前它们是类而不是 id，但我猜这不应该有什么不同吗？

现在，一旦我们在左侧菜单中放置一个如下所示的 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>

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

4

2 回答 2

2

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

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

于 2013-10-07T11:08:39.293 回答
1

可能是笔误：

你错过了类选择器main

于 2013-10-07T11:02:20.077 回答