1

3 つの div が隣り合っており、コンテンツがなくても完璧に配置されています。ただし、最初の div 内に別の div を配置すると、他の 2 つ (中央と右) が押し下げられます。内側の div は彼の親 (左の 1 つ) よりも小さいため、押し下げている理由がわかりません。

これはグローバル ラッパーです。

.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>

float を使用してみましたが、それもうまくいきません。誰かが解決策を知っていれば、私は幸せです

4

2 に答える 2

1

タイプミスの可能性があります：

のクラス セレクターを見逃しましたmain

于 2013-10-07T11:02:20.077 に答える