0

幅 1220 ピクセルの外側のコンテナーを 2 つの内部セクション (幅 770 ピクセルと幅 330 ピクセル) でレンダリングする単純なページがあります。どちらも 20 ピクセルの余白があり、770 ピクセルには左右のパディングが 20 ピクセルに設定されています。

これにより、

  • 20+20+770+20+20+20+330+20 = 1220
  • または ... マージン + パディング + セクション + パディング + マージン + マージン + セクション + マージン

float を使用する場合、外側の幅を 1220px に設定し、内側の幅を 770 と 330 に設定して、余白とパディングを使用して残りを埋めることができます。これは正しくレンダリングされますが、フロートは必要ありません!

<div style="width: 1220px; background-color:#ffe4c4;">
    <section style="width: 770px; float: left; padding: 0 20px; margin: 20px; background-color: #ccc;">
        <!-- content goes here -->
        @RenderBody()
    </section>

    <section style="width: 330px; float: left; margin: 20px; background-color: #d8bfd8; padding: 0">
            <img src="/media/1155/menu_fake.jpg" width="330" />
    </section>
</div>

インライン ブロックを使用する場合、要素を隣り合わせに表示するには、いくつかのピクセル (正確には 4 ピクセル) を削除する必要があります。

<div style="width: 1220px; background-color:#ffe4c4;">
    <section style="width: 766px; vertical-align:top; padding: 0 20px; margin: 20px; background-color: #ccc;">
        <!-- content goes here -->
        @RenderBody()
    </section>

    <section style="width: 330px; display: inline-block; vertical-align:top; margin: 20px; background-color: #d8bfd8; padding: 0">
            <img src="/media/1155/menu_fake.jpg" width="330" />
    </section>
</div>

アドバイスをいただければ幸いです。

4

1 に答える 1

5

inline-block要素は、ソース内の要素間の空白もレンダリングします。それらを排除するには、コード内の空白を削除する必要があります。

詳細はこちら

于 2013-05-03T09:54:39.880 に答える