CSS でサイズ変更可能なスペースにさまざまな長さの項目を並べるにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/122920

質問

おおよそこんな感じで項目を並べていきたいと思います。

item1      item2           i3           longitemname
i4         longitemname2   anotheritem  i5

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

列の数がわからないので (1 行に何行収まるかわからないので)、HTML テーブルを使用することはできないと思います。CSS を使用してそれらを浮動させることはできますが、サイズが異なるため整列しません。

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

もっと良い提案はありますか？

役に立ちましたか？

解決

これは、float div を使用し、最大幅を計算し、すべての幅を最大値に設定することで実行できます。これを行うための jQuery コードは次のとおりです。

html:

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

css:

div.item { float: left; }

jクエリ：

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

醜すぎず、でも美しすぎず、より良い提案をお待ちしています...

他のヒント

1 つのアイテムが異常に大きく、残りのアイテムが小さく見えたらどうなるでしょうか?私は 2 つの解決策を検討します。

  1. float:left; を使用してすでに思いついたもの。ルールと jQuery、ただし最大 max_width も指定する、または
  2. そこに含まれると予想される値に基づいて、すべての項目のプリセット幅を事前に決定するだけです。

次に、overflow:hidden; を追加します。長いアイテムがテーブルの外観を壊さないようにルールを決めます。jQuery 関数を変更して、末尾に省略記号 (...) を追加して長い項目をトリミングすることもできます。

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

編集：投稿の後半を読んで、まさにこの修正を提案していることがわかりました。この投稿を現在のアイデアに対する +1 として数えてください:)

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

そうですね、「項目」ごとに浮動 div を作成し、そのプロパティをループして改行を使用することはできますか?プロパティのループが終了したら、div を閉じて、新しい div を開始しますか?そうすれば、それらは柱のようになり、隣り合って浮かぶだけになります。ウィンドウが小さい場合、ウィンドウは次の「行」にドロップダウンし、サイズを変更すると右にフロートして戻ります (実際には左です :-)

次のように、いくつかの順序なしリストをフロート化できます。

<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 に押し込む必要があるかを計算する必要がありますが、この方法では、リストを保持するコンテナーのサイズを変更すると、リストはそのコンテナーに収まるように浮動します。 。

各列を同じ幅にして次のように使用できます。

列幅は固定されていますが、リストは自動的にリフローされます。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;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top