0

私はこのコードを書きました：

<body>
<div>
    <div style="padding:10px;float:left;height:500px;background-color:#ff6a00;">
        Div1 -> Floated
    </div>
    <div style="padding:10px;height:600px;background-color:#5c64bb;display:-webkit-flex">
        Div2 -> Not Floated
    </div>
</div>

結果は下の画像です。クロムでのみ動作する -webkit-flex display を使用してこの結果を達成できました。同じ結果が得られるアイデアはありますか。

ちなみに、Div2とpositionabsoluteのmargin-leftも使いたくないです。

ここに画像の説明を入力

4

2 に答える 2

1

左側に静的な幅を指定してもかまわない場合は、次のようにして右側のフレックス タイプ レイアウトを実現できます。

<div style="display:table;width:100%;">
    <div style="display:table-cell;width:130px;vertical-align:top;">
        <div style="padding:10px;height:500px;background-color:#ff6a00;">
            Div1
        </div>
    </div>
    <div style="display:table-cell;vertical-align:top;">
        <div style="padding:10px;height:600px;background-color:#5c64bb;">
            Div2
        </div>
    </div>
</div>

http://jsfiddle.net/LHZKp/

于 2013-10-20T15:07:09.087 に答える