CSSを使用して私のリストに2つの列レイアウトを作成したいと思います。 2つの列を自動的に塗りつぶす
のは、私は5つの項目があるとしましょう
は、プレゼンテーションは次のようになります。<item 1> <item 4>
<item 2> <item 5>
<item 3>
がどのようにHTMLとCSSでこれを行うことができますか？リストの長さは可変であることに注意してください。
私はより柔軟性を提供する、C＃を使用してHTMLサーバー側を生成します。
、AListApartからかなりのカバーを、この記事をお試しください。
中間点（現在のインデックス> =長さの半分）を過ぎると、サーバーサイドコードがアイテムを反復し、新しいDIVを作成します。
結果のHTMLは次のようになります。
<div class="container">
<div class="column">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<div class="column">
<div>Item 4</div>
<div>Item 5</div>
</div>
<div style="clear: both"></div>
</div>
CSS：閉じ、新しいDIVを作成する際
.column { float: left; }
サーバ側が決定しますが。かわいいですが、それは動作します。
そしてあなたのコードは..？ Stackoverflowのポイントは、コードソリューションを投稿することによって他の人を助けることです。私はあなた自身の問題を解決/解決することができたことをうれしく思っていますが、将来同じ問題に遭遇するかもしれない他の人たちを助けることができればうれしいです=） –
良い解決策Adrian。 トーマスは、自分のソリューションをコピー/ペーストするだけでは怒っているようです。それはかなり自明です。 – JoeB
は、私はようやく私の決心をしたし、このレイアウトを達成するために2つの浮いたdivを使用するすべての拠点
非常にいい@tom私は記事を探していたが、その間にそれを残していた – TheVillageIdiot
私はこれをCSSを使って行うことはできないと思います。あなたが必要とするjavascript/JSPソリューションのように聞こえます。 – James
はい、愚かなことに、HTMLとCSSサーバー側を生成します。私はHTMLとCSSがどのように見えるか知りたいです。 –
Acrossは簡単ですが、もっと難しくなります...いくつかのトリックがありますが、ほとんどの場合、 "newspaper columns"効果はCSSで難しいと見なされます。 cssにはいくつかの拡張機能がありますが、それらはクロスブラウザではありませんが... – Stobor