1

うまくいけば、私は誤ったタイトルと戦うのに十分な情報を提供します。

サイドバーとコンテンツセクションの2つの主要なセクションがあるWebサイトを設計しています。サイドバーは左側にあり、コンテンツは右側にあります。これまでのところ、このマークアップとそれに対応するCSSがあります。

<section id="sidebar">
    sidebar
</section>
<section id="content">
    content
</section>

#sidebar {
    width: 29%;
    background: #f7f3ed;
    float: left;
    padding-right: 1%;
    text-align: right;
}

#content {
    width: 69%;
    padding-left: 1%;
    float: left;
}

うまくいけば、私がここでやろうとしていることがわかるでしょう。サイドバーとコンテンツ領域をパーセンテージで定義して、ブラウザウィンドウのサイズが変更されても、形状が維持されるようにします。

ただし、サイドバーの右側に、コンテンツ領域から1ピクセルの境界線を配置する必要があります。これを追加すると、全体の幅が100％を超える1ピクセルであるため、コンテンツ領域がサイドバーの下に押し出されます。

これがjsfiddleの例です：http：//jsfiddle.net/juffd/

コンテンツ領域をサイドバーの下に折り返すことなく、また各要素の幅をピクセル単位で具体的に指定せずに、境界線を適用するにはどうすればよいですか？

4

1 に答える 1

4

を使用しbox-sizing: border-box;ます。これにより、要素の幅にそのパディングと境界線が含まれるようになります。

于 2013-01-02T00:18:27.790 に答える