0

同じサイズの画像のセットがあります。
それらを表のような構造として表示したいのですが、ユーザーのブラウザのウィンドウ幅に応じて「列」の数を変更し、すべての構造を中央に配置します。
私が思いついたのはこれです: http://jsfiddle.net/MHva2/3/。 

.container {
    display: table;
    margin: auto;
}

.element {
    width: 200px;
    height: 200px;
}

<div class = "container">
    <img class = "element" />
    <img class = "element" />
</div>

これは、すべての画像を 1 行に配置できる場合にのみ機能します。
行が「改行」されると、container要素はhttp://jsfiddle.net/MHva2/5/のようにすべて自由な場所になります。
この状況でコンテンツの周りを流れるようにする方法はありますか?

更新:
説明しようと思います。
私が望むのは、ブラウザがコンテナに画像を自動的に配置することです。コンテナ内では、列数が に等しいテーブルセルのように見えるはずですfloor(window_width / image_width)。
画像の数は異なる場合があり、テーブルのような構造全体を中央に配置する必要があります。
同じ数の画像を含む同じページが、異なるサイズのウィンドウ内でどのように見えるかを示す絵を描きました: http://rghost.net/44024115.view。

4

1 に答える 1

1

@milind_developerは正しいです。あなたの質問は言葉遣いが不十分で、確かに詳細を使用できます。

私が集めたものから、ユーザーのビューポートのサイズで拡大/縮小する柔軟な数の列が必要ですか?

これを行うには、次のような列クラスを作成できます。

.example-column {
    float: left;
}

次に、列内に必要な要素を囲みます。

 <body>
    <div class="wrapper">
        <div class="container">
            <div class="example-column">
                <div class="element"></div>
                <div class="element"></div>
                <div class="element"></div>
           </div>
           <div class="example-column">
                <div class="element"></div>
                <div class="element"></div>
                <div class="element"></div>
           </div>
        </div>
    </div>
</body>

フロート スタイルは基本的なレベルの流動的なレイアウトを提供しますが、メディア クエリを使用して列の動作を非常に正確にしたい場合もあります。

@media only screen and (max-width: 500px) {
   .example-column {
        float: none;
    } 
}

これにより、500px 未満のものはすべて 1 つの列レイアウトを使用することになります (より細かく制御したい場合は、ID を使用します)。

フィドル: http://jsfiddle.net/MHva2/8/

于 2013-02-22T07:38:08.937 に答える