1

私は2列のレイアウトを持っています。フレックス レイアウトは、サポートしたいすべてのブラウザーでサポートされているわけではないため、 と を使用display: tableしdisplay: table-cellました。

私の現在の問題は、の上部のパディングを変更すると#sidebar > div > div、MAINコンテンツが影響を受けることですが、影響を受けるべきではありません。したがって、2 つの質問があります。

  • の上部パディングのMAIN変更によってが影響を受けるのはなぜですか?#sidebar > div > div
  • 影響を受けないようにするにはどうすればよいですか？

HTML

<div id="wrapper">
    <div id="sidebar">
        <div class="inner">
            <div>TEST</div>
            <div>TEST</div>
            <div>TEST</div>
            <div>TEST</div>
        </div>
    </div>
    <div id="content">
        <div class="inner">MAIN</div>
    </div>
</div>

CSS

body {
    background: #ecf0f1;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
*, *:before, *:after {
    box-sizing: border-box;
}
#wrapper {
    display: table;
}
#sidebar {
    display: table-cell;
    background: #2c3e50;
    color: #ecf0f1;
    width: 200px;
}
#content {
    display: table-cell;
    background: #ecf0f1;
    color: #2c3e50;
}
.inner {
    min-height: 100vh;
    padding: 0px 10px;
}
#sidebar > div > div {
    padding: 5px;
    padding-top: 50px;
    margin: 1px 0;
}

jsFiddle — パディングを変更するだけです。

4

1 に答える 1

6

vertical-align:top;MAIN div を指定しなかったためです。

#content {
    display: table-cell;
    background: #ecf0f1;
    color: #2c3e50;
    vertical-align:top;
}

jsFiddle の例

デフォルトの垂直方向の配置はベースラインであり、これが最終的に表示されたものです。

于 2014-04-29T21:03:34.203 に答える