使用python为row和col动态创建html网格

Posted 2023-03-05

【中文标题】使用python为row和col动态创建html网格

【英文标题】：use python to dynamically create html grid for row and col

【发布时间】：2019-05-08 19:40:07

【问题描述】：

我正在尝试使用 python 创建一个行和列网格。基本情况是，对于 userName 列表中的第一个元素，我应该创建一个 <div class="row">然后理想情况下循环的每第四次迭代我应该用另一个 div 关闭该行。

有点欺骗我的部分是，如果列表中的元素少于 4 个元素，如果列表中只有 3 个元素或 2 个元素，我仍然需要用另一个 div 正确关闭行在列表中。

希望我解释得足够好，请提出问题，我会再次解释我的意思。

    # userName = ['Name1', 'Name2']
    userName = ['Name1', 'Name2', 'Name3', 'Name4', 'Name5', 'Name6', 'Name7', 'Name8']
    # userName = ['Name1', 'Name2', 'Name3']

    html_card = ''
    for count, element in enumerate(userName, 1): # Start counting from 1

        # ADDING HTML ROW
        if count % 4 == 0 or count == 1:
            html_card += '<div class="row">'

        # ADDING HTML CARD COL
        html_card += '''\n<div class="col">
                        <div class="card card-block">
                          <div class="card mb-4 border-primary">
                                <div class="card-header bg-primary">element</div>
                                <div class="card-body text-primary">
                                  <h4 style="color:#0069d9" class="card-title">element Performance Runs</h4>
                                  <p style="color:#0069d9" class="card-text"></p>
                                  <button type="button" class="btn btn-primary" value="Show Div" onclick="showDiv()">Available Runs</button>
                                </div>
                             </div>
                        </div>
                    </div>\n'''.format(element=element)

        # ADDING HTML ROW DIV
        if count % 4 == 0 or element == userName[-1]:
            html_card += '</div>\n'

        print(html_card)

【问题讨论】：

能否提供相关的CSS代码？

当然让我附上。我不确定是否有，因为我在这里使用引导程序，但让我仔细检查一下。

这是一个 JSFiddle，css 有点偏离，但我并不担心，因为我的设置 css 是正确的。我更担心我从 python 方面正确创建网格系统的逻辑。此外，这个网格只是我想要完成的一个想法。 jsfiddle.net/mastarke/svfjqg0y/3

对不起，我做了一个假设<div class= >...

【参考方案1】：

如果我理解正确，您希望以 4 行的形式打印 userName 的元素。如果最后一行未满，则无论如何都结束该行，如下所示：

| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 |

为了在下面的代码中进行更简单的演示，我缩短了中间的 HTML，但无论如何它应该可以工作。这里我们可以让Python通过使用数组切片来完成位置的跟踪工作（即如果x = [1,2,3,4]，那么x[0:2]就是[1,2]，因为x[a,b]表示x的子列表从索引开始a 并继续 b 元素）。

所以我们可以遍历我们想要的行集，并切出列值，如下所示：

userName = ['Name1', 'Name2', 'Name3', 'Name4', 'Name5', 'Name6', 'Name7']

row_length = 4
html_card = ''
for i in range(0, len(userName), row_length):
    html_card += '<div class="row">'
    for element in userName[i:i+row_length]:
        html_card += '\n<div class="col">element </div>\n'.format(element=element)
    html_card += '</div>\n'

print(html_card)

通过简化 HTML，可以更轻松地查看代码中的内容。一种方法是在循环之外创建一个字符串，您可以将其用作模板并调用 format。

【讨论】：

感激不尽，这绝对是我想要的。