9

Google Chrome でフレックスボックスを使用して (このブラウザーのみをサポートする必要があります)、動的レイアウトを作成します。1 つの div 要素に n 個の子要素があり、スペース全体を同じ比率で共有する必要があります。新しく導入されたフレックスボックスにより、これは問題なく機能しています。しかし、各内部 div の高さを 0 に設定する必要もありました。この div 内の要素を高さ 100% に引き伸ばしたい場合は、計算された値ではなく、指定された値 0 を使用します。javascript の使用を防ぐためにフレックスボックスを選択したので、そのままにしておくことをお勧めします。画像の高さを div に合わせる他の方法はありますか?

コードは次のとおりです (Google Chrome でのみテスト済み)。

html

<div class="flexbox">
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
</div>

CSS

            .flexbox {
                display:-webkit-box;
                -webkit-box-orient:vertical;
                height:300px;
                width:200px;
            }
            .flexbox > div {
                -webkit-box-flex:1;
                height:0;
                border:solid 1px #000000;
            }
            .flexbox > div > img {
                height:100%;
            }

ブラウザで監視するコード

4

1 に答える 1

8

さて、何時間もの調査の結果、動作するようになりました。次の変更を行う必要があります。

.flexbox {
            display:-webkit-box;
            -webkit-box-orient:vertical;
            height:300px;
            width:200px;
        }
        .flexbox > div {
            -webkit-box-flex:1;
            height:0;
            border:solid 1px #000000;
            position:relative; /* CHANGE */
        }
        .flexbox > div > img {
            height:100%;
            position:absolute; /* CHANGE */
        }

興味がある場合は、ChromeDevTools を使用して css にこれらの変更を加えると、正しい結果が表示されます。

于 2011-12-27T23:42:14.733 に答える