0

Hulu 行のメディア ファイルに匹敵する div のレイアウトがあります。何かのようなもの

*---------------*  *------------*  *------------*
|               |  |    Small   |  |    Small   |
|               |  |    Item A  |  |    Item B  |
|               |  *------------*  *------------*
|   Big Item    |
|               |  *------------*  *------------*
|               |  |    Small   |  |    Small   |
|               |  |    Item 1  |  |    Item 2  |
*---------------*  *------------*  *------------*

ここで問題となるのは、項目の「順序」です。

アイテムの dom 内の順序は、A、B、1、2 になります。

ただし、1 と 2 と同様に、A と B が並んでいることに気付くでしょう。

そのようです：

*---------------*  *------------*  *------------*
|               |  |    Small   |  |    Small   |
|               |  |    Item A  |  |    Item 1  |
|               |  *------------*  *------------*
|   Big Item    |
|               |  *------------*  *------------*
|               |  |    Small   |  |    Small   |
|               |  |    Item B  |  |    Item 2  |
*---------------*  *------------*  *------------*

レイアウトは次の HTML にあります。

<ul>
    <li>big item</li>
    <li>small item A</li>
    <li>small item B</li>
    <li>small item 1</li>
    <li>small item 2</li>
    ......

これまでのところ、UL を特定の幅にすることで、小さなアイテムを積み重ねることができましたが、前述のように、DOM の配置順に積み重ねたいと思います。

いいえ、フィドルはありません。これは jcarousel 用にカスタマイズしているスキンの一部であるためです。正直なところ、カスタム スキンと動的リスト アイテムを使用してこの例の短いフィドルを作成するのは、理解するよりも困難です。この問題はアウト...だと思います！

そういえば、これらの li 要素はすべてコントローラーから動的に追加されます。それぞれに特定の「トップ」|「ボトム」クラスを計算して与えることができると思いますが、これは避けようと懸命に努力していることの 1 つです。私ができる場合。

4

2 に答える 2

2

すべてのアイテムをテーブルに挿入して、好きなように正しい位置に配置する可能性があります。しかし、これはもはや使用されていない昔ながらのプログラミング スタイルです。(画面解像度が異なるため、最小幅と最大幅に注意する必要があります!)

もう 1 つのオプション (ここでの最良の方法) は、Big アイテムを div ボックスに入れ、A+1 と B+2 も div に入れることです。A+1フロートの後にクリアで並べてフロートすればうまくいくと思います。（そして、すべてのアイテムのdivを忘れないでください;））

スマートフォンでも div ソリューションを簡単に取得でき、入力する必要のない大量のコードを保存できるため、2 番目のソリューションを選択する必要があります。

処理する div コードに問題がある場合は、私に書いてください。

@ヨハン・ブーベン!!! ええ、あなたは正しいですが、これは最終的な解決策ではありません。遅かれ早かれ、彼はそれを div 形式に変更する必要があります。日常生活でそのようなコードを見つけることはありません。

于 2013-07-16T08:16:13.683 に答える
2

これは、スタック順序を変更し、div を使用せず、css のみを使用した最小の最小限の例です。

http://jsfiddle.net/mm58g/

<ul>
    <li class="big">Big</li>
    <li class="small">Small A</li>
    <li class="small">Small 1</li>
    <li class="small">Small B</li>
    <li class="small">Small 2</li>
</ul>

ul{width:500px;padding:0;overflow:hidden;}
li{border:1px solid green;list-style-type:none;}
.big{width:150px;height:150px;float:left;}
.small{width:120px;height:65px;float:left;margin:0 0 20px 20px;}
于 2013-07-16T08:37:10.843 に答える