2

表示したい項目 (テキスト、画像、混合コンテンツなど) がたくさんあります。ユーザーは、アイテムが表示される行と列を定義できます。たとえば、行 1 には、2 つのアイテム/列があり、どちらも画像である可能性があります。行 2 には、3 つの項目 / 列があり、1 つは画像付きで、残りの 2 つは純粋なテキストです。ああ、ユーザーは特定の列/画像/アイテムの幅を指定できます。

機能する複数のテーブルを使用するソリューションがあります。本質的に、各行は新しいテーブルです。これはほとんどの場合機能します。

divだけを使用できるかどうか疑問に思っていますか?

現在、CSS foo が不足しており、Web から例をコピーしようとしましたが、機能させることができませんでした。今、私はこのようなものを持っています:

【各行ごと】
  [div style="float: none"]
  【各欄について】
    [div style="float: left"]
      [コンテンツ]
    [/div]
[/div]
[br]

しかし、すべてが重なり合っています。

「position: relative」も試してみましたが、もっとつまらないものに見えます。

div は実際に複数の行と異なる数の列に使用できますか?

4

2 に答える 2

2

彼らは確かにできます！あなたが探している基本的な効果（のように聞こえます）は次のようになります：

#wrapper {
    width: 900px;
}
    
.item {
    height: 200px;
    width: 200px;
    margin: 10px;
    float: left;
}
<div id="wrapper">
    <div class="item">Something</div>
    <div class="item">Something else</div>
    <div class="item">Something cool</div>
    <div class="item">Something sweet</div>
    <div class="item">Something just ok</div>
</div>

したがって、これが行うことは、固定幅のコンテナー ( ) をセットアップし、#wrapper「ブロック」で埋めることです。それぞれが固定幅で左にフロートしているため、グリッドに整列します。それぞれに設定した幅/マージンのため、1 行あたり 4 つ取得する必要があります。スペーサーが必要な場合は、空白の DIV を挿入して、コンテンツを正しい行/列に配置します。

于 2010-04-12T01:16:03.123 に答える
0

960 グリッド システムは、まさにこのようなことを達成するように設計されています。http://960.gs/を見てください。960 でできることの例がたくさんあります。

知識のない人のために、12 列または 16 列の 2 種類のレイアウトを定義します。各列は事前定義された幅であり、それらの間に事前定義されたガターがあります。次に、組み込みの css スタイルを使用して、div を任意の数の列にまたがらせることができます。ページのさまざまなセクションがさまざまなレイアウトを使用しているレイアウトでは、非常に強力です。

于 2010-04-12T01:14:23.107 に答える