2

自動左右マージンを使用して中央揃えのブロックが必要ですが、背景色も必要です。ブロックのマージン領域には背景色が適用されないため、背景色が設定されたブロックを使用してから、自動マージンを使用した内側のブロックを使用しています。

余分なマークアップが必要なので、私はこれが好きではありません。単一のブロックを使用するだけでこれを達成する手法はありますか?

更新: 明確にするために、2 つではなく 1 つのブロックだけで同じことを達成したいと考えています。以下の例では、内側の div を削除します。

現在使用しているベアボーンコード:

<section id="example">
    <div id="inner">
        <h1>Example</h1>
        <p>Example content.</p>
    </div>
</section>

<style>
    #example {
        background-color:#ccc;
    }
    #inner {
        margin:0 auto;
        padding:10px 0;
        width:500px;
        background:white;
    }
</style>

サイトや Google を検索しても何も見つかりませんでした。

前もって感謝します、ナイジェル

4

2 に答える 2

1

div#inner を中央に配置したいので、常に親になります。この場合、別の要素 #portfolio ですが、body の場合もあります。この解決策は完全に受け入れられます。

負のマージンといくつかのパディングを追加してみることができますが、割り当てが複雑になります。あなたが今持っているものは、幅を埋めて完全に背景色を与える1つの要素と、中央に配置される1つの要素です。

于 2013-07-27T14:09:12.320 に答える
1

ブロック要素の固定セットがある場合は、 のすべての子にマージンを設定できます#example。ここにjsFiddleがあります。

問題は、HTML マークアップで何を保存するか、CSS で無駄にするか、ブロックの子しかないという前提の下にあることです。たとえば、<span>タグを追加すると、このフローが中断され、タグ自体をブロック コンテナーにラップする必要があります。

HTML

<section id="example">
        <h1>Example</h1>
        <p>Example content.</p>
</section>

CSS

#example {
        background-color:#ccc;
}
#example > * {
    width: 200px;
    margin: 0 auto;
}
于 2013-07-27T14:13:09.447 に答える