主页 / 问题 / 919677
Accepted
Malyuga
Asked:2020-12-14 02:38:14 +0000 UTC2020-12-14 02:38:14 +0000 UTC

将 div 限制为一行并换行到下一行

  • 772

假设我们有一个产品列表。将商品添加到页面是从服务器完成的。对于设置了产品的块display:flex，但是如何实现对一行的限制。假设我只想在一行中显示 3 个产品，然后转移到下一行。

.content {
  width: 1200px;
}

.products {
  display: flex;
}

.product {
  text-align: center;
  width: 150px;
  height: 100px;
}
<div class="content">
  <div class="products">
    <!--Сюда добавляется товар с классом product-->
  </div>
</div>

html

1 个回答

  1. Best Answer

    因为你有一个硬设置的.product 宽度（宽度：150px），每行只有3 个项目，你需要硬限制.products 的宽度（例如550px）。好吧，进行转移（flex-wrap：wrap）

    .content {
   width: 1200px;
   border: 1px solid red;
}

.products {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   border: 1px solid green;
   width: 550px;
   margin: 15px auto;
}

.product {
   text-align: center;
   width: 150px;
   height: 100px;
   margin: 10px;
   border: 1px solid blue;
}
    <div class="content">   
    <div class="products">
        <div class="product">123</div>
        <div class="product">456</div>
        <div class="product">789</div>
        <div class="product">abc</div>
        <div class="product">def</div>
        <div class="product">ghi</div>
        <div class="product">jkl</div>
        <div class="product">nmo</div>
    </div>
</div>

    • 2

相关问题