0

我正在寻找为我正在处理的网页创建一个网格系统，以显示一定数量的项目/项目属性。但是，由于我拥有的数据非常动态，我并不总是知道需要显示的项目数量，因此无法确切知道网格项目应该具有哪些尺寸才能正确格式化页面。

谁能指出我如何开始像上面那样的网格的正确方向？

我对 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

您可以使用支持网格的 CSS 框架，例如UIKit。你可以像这样使用它：

<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 回答
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%;
}

根据您想要在一行中的项目数更改计算。

于 2014-03-18T12:15:22.887 回答
-2

也许Javascript会是实现这一目标的更好方法？

于 2014-03-18T12:05:00.180 回答