Question

这是我的第一个问题。我是电子商店的二级操作。我有个问题。当在购物车中添加3个项目时，它们在第1行显示2，在第2行显示1。我试着将它们放在同一行。

项目类 - ＆gt;产物的内

三个项目的后面 - ＆gt; products.columns-3

我使用此代码，但没有任何反应。

ul.products.columns-3{
display: flex;
background-color: white;
flex-direction: row;
justify-content: center;
}
div.product-inner{
flex: 0 0 33.3333%;
}

你可以帮忙吗？感谢

Answer 1

＆＃13;

ul.products.columns-3{
  display: flex;
  background-color: white;
  flex-direction: row;
  justify-content: center;
}
div.product-inner{
  border: 1px solid green;
  flex: 0 0 33.3333%;
}

＆＃13;

<ul class="products columns-3">
  <div class="product-inner">PRODUCT 1</div>
  <div class="product-inner">PRODUCT 2</div>
  <div class="product-inner">PRODUCT 3</div>
      
</ul>

＆＃13;

错误与您提供的代码无关，它连续显示三个项目。如你所说，它是Wordress中的一个style.css，还有其他任何一种风格都会让你烦恼。

使用flexbox连续3个项目

1 个答案: