1

左、中央、右に要素を含むヘッダーがあります。これを実現するために、フロート左 div、フロート右div、およびマージン 0 自動 div をここに例として示します。

<div style="text-align: center;" >

    <div style="width: 200px; height: 100px; background: red; float: left;"></div>
    <div style="width: 100px; height: 100px; background: blue; float: right;"></div>

    <div style="background: green; margin: 0 auto; display: inline-block;">
        <div style="width: 150px; height: 100px; background: orange;"></div>
    </div>

</div>

中央のコンテンツの幅を変更できるようにするために、中央の div をインライン ブロックに設定しました。ただし、そうすることで、margin: auto は浮動要素を実際にスペースを保持しているように扱います。左が右よりも広い場合、中央の要素がわずかに (またはそれほどでもなく) 中心からずれてしまいます。

できればスクリプトに頼らずに、私がやろうとしていることを行う方法はありますか? その必要がある場合は、中央の列を固定幅にすることの結果に対処したいと思います。

[編集] 中間または右のコンテンツが存在しない場合があることに注意してください。

4

2 に答える 2

1

私はあなたがこのようなものが欲しいと思います:

<div>
    <div style="width: 200px; height: 100px; 
                background: red; float: left;"></div>
    <div style="width: 100px; height: 100px; 
                background: blue; float: right;"></div>

    <div style="background: green; display: block; margin: 0 100px 0 200px;">
        <div style="width: 150px; height: 100px; 
                    background: orange; margin: 0 auto;"></div>
    </div>

</div>

フィドルで：http://jsfiddle.net/audetwebdesign/AFQV3/

中央の要素をインフロー (フロートではなく) に保ち、左右のマージンを設定して、左右のフロート要素を許可します。

中央の div には、フロート間の中央に配置するオレンジ色の div など、他の要素を設定できるスペースのブロックがあります。

于 2013-05-24T23:41:07.280 に答える
1

float の代わりに position を使用できます: http://jsfiddle.net/uuq4Z/5/

<div style="text-align: center; position: relative;" >

    <div style="width: 200px; height: 100px; background: red; position: absolute; left: 0; top: 0"></div>
    <div style="width: 100px; height: 100px; background: blue; position: absolute; right: 0; top: 0;"></div>
    <div style="background: green; display: inline-block;">
        <div style="width: 150px; height: 100px; background: orange;"></div>
    </div>

</div>
于 2013-05-24T21:36:43.033 に答える