1

おおよそ次のようにアイテムを並べたいと思います。

item1      item2           i3           longitemname
i4         longitemname2   anotheritem  i5

基本的に、テーブルのような構造に配置されたさまざまな長さのアイテム。注意が必要な部分は、これらのコンテナのサイズが異なる可能性があることです。各行にできるだけ多くのアイテムを収めたいと考えています。つまり、1 行にいくつのアイテムが収まるか、ページがサイズが変更されたアイテムは、対応するためにリフローする必要があります。たとえば、最初は各行に 10 個のアイテムが収まる可能性がありますが、サイズを変更すると 5 個に減る可能性があります。

列の数がわからないため（1行に収まる数がわからないため）、htmlテーブルを使用できるとは思いません。css を使用してそれらをフロートさせることはできますが、サイズがさまざまであるため、並べることはできません。

これまでのところ、私が考えることができる唯一のことは、JavaScriptを使用して最大のアイテムのサイズを取得し、すべてのアイテムのサイズをそのサイズに設定し、すべてをフロートさせることです。

より良い提案はありますか？

4

7 に答える 7

2

これは、フローティング div を使用して最大幅を計算し、すべての幅を最大に設定することで実行できます。これを行うためのjqueryコードは次のとおりです。

html:

<div class="item">something</div>
<div class="item">something else</div>

CSS:

div.item { float: left; }

jquery:

var max_width=0;
$('div.item').each( function() { if ($(this).width() > max_width) { max_width=$(this).width(); } } ).width(max_width);

醜すぎず、可愛すぎず、より良い提案をお待ちしております...

于 2008-09-23T19:53:57.493 に答える
1

1 つのアイテムが途方もなく大きく、残りが小さく見える場合はどうなりますか? 私は2つの解決策を検討します：

  1. float:left; に関する既に思いついたこと ルールとjQuery、ただし最大max_widthもまたは
  2. そこにあると予想される値に基づいて、事前にすべてのアイテムのプリセット幅を決定するだけです

次に、overflow:hidden; を追加します。より長いアイテムがテーブルの外観を台無しにしないようにルールを設定します。末尾に省略記号 (...) を追加して、長い項目を削除するように jQuery 関数を変更することもできます。

于 2008-09-23T20:00:31.377 に答える
0

左にフロートしたブロックレベルの要素を使用することもできますが、サイズを確認し、最大のものを見つけて、それらをすべてその幅に設定するには、JavaScriptが必要になります。

編集：あなたの投稿の後半を読んで、あなたがちょうどこの修正を提案したのを見ました。あなたの現在のアイデアの+1としてこの投稿を数えてください:)

于 2008-09-23T18:44:58.003 に答える
0

実際には、maxWidth と maxHeight を計算し、ページの読み込み後に Javascript でサイズ変更関数を実行する必要があります。以前のプロジェクトでこれを行う必要がありましたが、div の高さが異なる場合、ブラウザーの 1 つ (FF?) が下のブラウザーを引っ掛けたりオフセットしたりします。

于 2008-09-23T19:38:29.137 に答える
0

さて、「アイテム」ごとにフローティング div を作成し、そのプロパティをループして改行を使用することはできますか? 次に、プロパティのループが終了したら、div を閉じて新しいものを開始しますか? そうすれば、それらは列のようになり、隣同士に浮かんでいます。ウィンドウが小さい場合、次の「行」にドロップダウンし、サイズを変更すると、右に浮き上がります (実際には左です:-)

于 2008-09-23T19:44:32.460 に答える
0

次のように、いくつかの順序付けられていないリストをフロートできます。

<ul style="float: left;">
    <li>Short</li>
    <li>Loooong</li>
    <li>Even longer</li>
</ul>
<ul style="float: left;">
    <li>Loooong</li>
    <li>Short</li>
    <li>...</li>
</ul>
<ul style="float: left;">
    <li>Semi long</li>
    <li>...</li>
    <li>Short</li>
</ul>

いくつのリストの中のいくつのリストアイテムを DOM に押し込む必要があるかを計算する必要がありますが、この方法では、リストを保持するコンテナーのサイズを変更すると、リストはそのコンテナーに収まるように浮動します。 .

于 2008-09-23T19:52:33.690 に答える
0

各列を同じ幅で次を使用できます。

列幅は固定されますが、リストは自動的にリフローします。HTML を少し追加しましたが、今では FF en IE で動作します。

html:

<ul class="ColumnBasedList">
  <li><span>Item1 2</span></li>
  <li><span>Item2 3</span></li>
  <li><span>Item3 5</span></li>
  <li><span>Item4 6</span></li>
  <li><span>Item5 7</span></li>
  <li><span>Item6 8</span></li>
</ul>

CSS:

.ColumnBasedList
{
    width: 80%;
    margin: 0;
    padding: 0;
}

.ColumnBasedList li
{
    list-style-type: none;
    display:inline;
}

.ColumnBasedList li span
{
    display: -moz-inline-block;
    display: inline-block;
    width: 20em;
    margin: 0.3em;
}
于 2008-09-23T20:01:44.917 に答える