0

特定の数のアイテム/アイテム プロパティを表示するために取り組んでいる Web ページのグリッド システムを作成しようとしています。ただし、私が持っているデータは非常に動的であるため、表示する必要があるアイテムの数を常に把握しているわけではなく、ページを正しくフォーマットするためにグリッド アイテムに必要な寸法を正確に把握することもできません。

上記のようなグリッドを開始する方法について、誰かが私を正しい方向に向けることができますか?

HTML、php、および CSS にある程度精通しています。オンラインで作成するためのデータの大きなリソースがあることは理解していますが、探していたものが見つからなかったと思います。

4

5 に答える 5

0

アイテムのセットがあり、各アイテムに多数のプロパティがあるということですか? おそらく、それぞれに同じプロパティがありますか？

それが表データです。テーブルを使用します。

<table>
    <thead>
        <tr>
            <th scope="col">Item
            <th scope="col">Colour property
            <th scope="col">Size other
    <tbody>
        <tr>
            <td>Foo
            <td>Blue
            <td>XXL
        <tr>
            <td>Bar
            <td>Red
            <td>Small
</table>
于 2014-03-18T12:00:46.103 に答える
0

HTML は次のようになります。

<ul class="block-grid">
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
</ul>

これを機能させる方法は次のとおりです。

.block-grid {
   list-style-type: unstyled;
   display: block;
   overflow: hidden;
   /* If you want 3 items in a row */
   margin-left: -2%;
}

.block-grid > li {
   /* If you want 3 items in a row */       
   margin-left: 2%; 
   width: 31.3%;
}

1 行に表示するアイテムの数に応じて計算を変更します。

于 2014-03-18T12:15:22.887 に答える
0

UIKitなど、グリッドをサポートする CSS フレームワークを使用できます。次のように使用できます。

<div class="uk-grid">
    <div class="uk-width-1-3">first</div>
    <div class="uk-width-1-3">second</div>
    <div class="uk-width-1-3">third</div>
</div>

UIKit は最大 10 列のグリッドをサポートしますuk-width-1-1。uk-width-1-10

于 2014-03-18T12:03:05.197 に答える
0

データが動的な石積みになる場合、jqueryは大きな助けになります。そのさまざまな機能をチェックしてください。

于 2014-03-18T12:08:40.257 に答える
-2

おそらくJavascriptはこれを達成するためのより良い方法でしょうか?

于 2014-03-18T12:05:00.180 に答える