1

divのシーケンスが1行にレンダリングされ、一部が左揃えで、一部が右揃えになるレイアウトを実現しようとしています。

<html>
    <body>
        <div width="100%">
            <div class="left">item1</div>
            <div class="left">item2</div>
            <div class="right">item3</div>
            <div class="right">item4</div>
        </div>
    </body>
</html>​
.left, .right
{
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.right
{
    float: right;
}

</ p>

私は上記のコードを持っています、そしてそれは私がie8、firefox、chromeで期待するようにレンダリングします。しかし、ie7では、右のフロートdivが同じ行ではなく次の行に表示されます

IE7以外の結果 ie7の結果

私はhttp://jsfiddle.net/acdara/MEDSy/27/にjsFiddleを持っています

もう1つの解決策は、左揃えの要素もフロートすることですが、要素をフローから除外する必要がないなど、インラインブロックの利点を維持したいと考えています。

インラインブロックの良さを維持するために、ie7に対して他にできることがあるかどうかを知りたいです。

4

2 に答える 2

2

1つの解決策は、マークアップの順序を反転して、最初に適切な要素をフローティングにすることです。

<div class="right">item3</div>
<div class="right">item4</div>
<div class="left">item1</div>
<div class="left">item2</div>

IE7で機能しなかった理由は、デフォルトでインラインではないアイテムのIE7ではインラインブロックが機能しないため（インラインブロックについてはブラウザーの互換性チャートを参照）、フローティングはフロートの通常の動作を示しますブロックアイテムの場合-つまり、アイテムが最初に左にフロートされている場合、フロートがない場合と同じように、右にフロートされたアイテムが順番にブロックアイテムの下に配置されます。

于 2012-04-04T23:46:07.753 に答える
0

私はこれですべてうまくいきました

<html>
    <head>
        <style>

.right
{
    float: right;
}
.left
{
    float: left;
}

        </style>
    </head>
    <body>
        <div width="100%">
            <div class="left">item1</div>
            <div class="left">item2</div>
            <div class="right">item3</div>
            <div class="right">item4</div>
        </div>
    </body>
</html>

確認してください: http://jsfiddle.net/Zgz9G/2/

于 2012-04-04T21:56:01.427 に答える