如何为每个产品创建带有复选框的容器[关闭]答案

【问题标题】：How do I create container with checkbox inside for each product [closed]如何为每个产品创建带有复选框的容器[关闭]
【发布时间】：2021-09-30 17:39:43
【问题描述】：

我对 html 很陌生，我有一个问题。

Image how it should look

所以，正如您在图片中看到的那样，每个产品（我从 mysql 数据库获得的产品，数据库正在工作）都有一个带有复选框（复选框用于批量删除）的单独容器，我想知道我该怎么做做这样的事情？我试过在谷歌上搜索类似的东西，但什么都没有出现:(，有人可以帮忙吗？

【问题讨论】：

欢迎来到 Stack Overflow。在这里您需要添加代码，以便我们了解您卡在哪里.. 努力添加代码以便我们可以提供帮助.. 没有人会在这里给您免费代码请检查How to ask Question

标签： php html css mysql

【解决方案1】：

我根据您的要求做了一些事情。方框内写的内容写在“p”标签（段落）内。只是为了让你有一个想法。但是您可以删除该段落以及您想要的任何类型的内容。这是html和CSS代码。

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="outerbox">
        <input type="checkbox" class="checkbox">
        <p class="content">jvc200123 <br>Acme <br>1.00 $<br>size:700 MB</p>
    </div>

</body>

</html>

    
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.outerbox {
  width: 150px;
  height: 150px;
  border: 2px solid grey;
  margin: 20px;
  border-radius: 5px;
}

.checkbox {
  margin: 10px;
  transform: scale(1.5);
}

.content {
  margin: 10px 25px;
  font-family: sans-serif;
}

【讨论】：

根据您的文件位置将 CSS 文件链接到 html 页面，以便代码完美运行。
这看起来真的很棒，谢谢。唯一的问题是，如果你不介意的话，我还有更多问题。第一：有没有办法让html在添加到数据库时自动为产品制作一个盒子？（我有数据库和另一个可以将产品添加到数据库的页面）。
你可以问我。没问题。
第一：有没有办法让html在添加到数据库时自动为产品制作一个盒子？（我有数据库和另一个可以将产品添加到数据库的页面）。第二：嗯，我怎样才能让这些盒子堆叠起来 ----> 就像那张照片中的那样，它们是 4 列然后是下一行，所以看起来有点整洁：D
您可以使用该框的 html 代码 sn-p 并粘贴任意数量的副本，并使用 CSS 网格在一行和一列中排列您想要的框数。