3

次のように div を配置する方法はありますか。

|----------||----------||----------||----------|
|  div1    ||   div5   ||          ||   div10  |
|----------||----------||   div7   ||----------|
|  div2    ||          ||          ||   div11  |
|----------||   div6   ||----------||----------|
|  div3    ||          ||   div8   ||   div12  |
|----------||          ||----------||----------|
|  div4    ||          ||   div9   ||   div13  |
|----------||----------||----------||----------|

だから私がやりたいのは、垂直方向にスクロールしない水平方向に拡張するレイアウトを持つことです。垂直方向にスペースを埋めてから水平方向に移動するだけです。したがって、最初の要素は右上に配置され、2 番目はその下に配置され、3 番目にもスペースがなくなるまで配置され、その後 (div5 のように) 一番上に配置されます。

4

2 に答える 2

0

ブループリント CSS フレームワークを確認する必要があります。私はそれを使用して、あなたの投稿に似たレイアウトのウェブサイトを作成しました。非常に使いやすく、高速です.

http://www.blueprintcss.org/

于 2013-02-18T23:03:53.660 に答える
-1

これは、浮動要素がコンテナー内で水平方向に流れる方法と垂直方向に同等です (あたかもfloat:topサポートされているかのように)。

@MarcB が指摘したように、将来これはCSS3 列で簡単に実行できるようになります。標準はまだ完全には定義されていませんが、次のようになります。

.container {
    height: 200px;
    column-width: 100px;
    column-gap: 10px;
    column-fill: auto;
}

それまでは、jQuery プラグインが最善の策かもしれません。たとえば、jQuery Masonry には1 列の書式設定があり、うまくいく可能性があります。十分な単純な jQuery プラグインが世の中にあるかもしれません。

関連する検索用語: jQuery、CSS 列、複数列レイアウト、タイル レイアウト、モザイク レイアウト

于 2013-02-19T02:00:19.900 に答える