在网页上创建动态网格系统答案

【问题标题】：Creating a dynamic grid system on a webpage在网页上创建动态网格系统
【发布时间】：2014-03-18 11:58:29
【问题描述】：

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

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

我对 HTML、php 和 CSS 有点熟悉。我知道有大量用于在线创建的数据资源，但是我认为我没有找到我想要的东西。

【问题讨论】：

强烈建议你使用 css 框架，他们已经花了很多时间为这些问题准备解决方案。此外，它们更易于使用，让您免于头痛！
谢谢 Maysam，我可能会研究不同的预先存在的框架，但是，我仍然想从理论上知道如何做到这一点，以便我能够进行任何需要的更改
只是CSS，例如你有一个父<div>，你给它分配一个width，然后对于孩子，你可以分配相关的宽度，比如@ 987654323@、15%等。它们是这样工作的

标签： php html css grid-system

【解决方案1】：

您可以使用支持网格的 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

【讨论】：

你也可以做一些 php 技巧来让它更动态，比如<div class="uk-width-1-<?variable_column(); ?>">foo</div>

【解决方案2】：

如果您的数据是动态的，masonry jquery 会对您有很大帮助。查看它的各种功能。

【讨论】：

【解决方案3】：

所以你有一组项目，并且每个项目都有许多属性？大概每个人都有相同的属性？

这是表格数据。使用table。

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

【讨论】：

谢谢 Quentin，你能像 div 一样设置表格样式吗？我也认为一张桌子是理想的，但项目的名称/属性会有所不同，我希望完全控制它们的样式
取决于您所说的“以相同方式”和“完全控制”。
如果您可以使用表格格式，那么您可以使用 jQuery DataTables datatables.net 扩展大部分功能和样式。由于您的数据是动态的，因此控件可以轻松地根据您的要求进行调整。

【解决方案4】：

以下是 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%;
}

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

【讨论】：

【解决方案5】：

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

【讨论】：