每行生成3个项

Question

我正在为一个学校项目制作一个网站，我是个菜鸟！

我离完成这个项目只有一步之遥，最后一步就是让我的动态创建的HTML产品显示在一行3中。

以下是我的HTML：

<div id="product-featured-box">

</div>

下面是我的CSS：

.product-featured-box {
  display: flex;
  justify-content: space-between;
  table-layout: fixed;
}
 
.product-box {
  display: flex;
}

在Google上的开发视图中，HTML是正确生成的，所有的产品框都在特色产品框中，但是我不知道如何让CSS做我想做的事情！

任何想法都会有帮助！

I使用MAC操作系统

我试着玩CSS

Answer 1

最好的解决方案是显示:网格。告诉这些方框，每一行宽度为3：

​

#product-featured-box {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

<div id="product-featured-box">
  <div class="product-box">1</div>
  <div class="product-box">2</div>
  <div class="product-box">3</div>
  <div class="product-box">4</div>
  <div class="product-box">5</div>
  <div class="product-box">6</div>
  <div class="product-box">7</div>
  <div class="product-box">8</div>
  <div class="product-box">9</div>
  <div class="product-box">10</div>
</div>

​

fr是一个比例单位。1fr的意思是比例的一个单位，因为你给所有的框都赋予相同的值，它们都有相同的宽度。

Answer 2

使用下面的代码，它将为您工作。

<div class="product-featured-box">
<div class="product-box">1</div>
<div class="product-box">2</div>
<div class="product-box">3</div>
</div>

<style type="text/css">
    .product-featured-box {
  display: flex;
  justify-content: space-between;

}
 
.product-box {
width: 33.3%;
padding: 15px;
text-align: center;
}
</style>