时间戳

首页 > 解决方案 > 仅使用 HTML/CSS 重复 HTML 元素

html - 仅使用 HTML/CSS 重复 HTML 元素

问题描述

我正在用 php、html 和 css 构建一个简单的事件日历。在日历中，我有一个基本的 div，里面有一些文本，这是日历中一个框的简单复制： 

<div class="day col-sm p-2 border border-left-0 border-top-0 text-truncate ">
      <h5 class="row align-items-center">
        <span class="date col-1">24</span>
        <small class="col d-sm-none text-center text-muted">Friday</small>
        <span class="col-1"></span>
      </h5>
      <p class="d-sm-none">Event: Go to Work</p>
</div>

日历内一切正常，只是我必须多次重复上述元素，实际上很多次，这通常不是一个很好的做法，而且代码很难工作和。所以我决定我会找到一种方法来重复这个 div 的代码，但只用 HTML 和 CSS 来做。最多只有一点点 php，但仅此而已。

我试过在谷歌和堆栈溢出上搜索并尝试答案，但都无济于事。任何帮助表示赞赏

标签： htmlcss

解决方案

如果不使用至少一点 PHP，您将无法做到这一点，不幸的是，仅 HTML/CSS 不足以创建循环（无论如何，如果不使用 PHP 中的变量，您几乎不需要这样做后面运行的代码）

因此，例如，使用一点 PHP，如果你想要这个元素 10 次：

<?php for ($x = 0; $x < 10; $x++) { ?>
<div class="day col-sm p-2 border border-left-0 border-top-0 text-truncate ">
      <h5 class="row align-items-center">
        <span class="date col-1">24</span>
        <small class="col d-sm-none text-center text-muted">Friday</small>
        <span class="col-1"></span>
      </h5>
      <p class="d-sm-none">Event: Go to Work</p>
</div>
<?php } ?>

推荐阅读