试图在每一行显示 3 个项目

Question

我正在我的网站上工作：http://ecoshopr.com/ 而不是每行有 4 个产品，我只想显示 3 个。这可以通过更改来完成：

.product_item {
width: 25%;
}

到

.product_item {
width: 33.333333333%;
}

但是，当我进行更改时，奇怪的事情发生了，它在每个 other 行上只显示 3 个产品。由于某些原因，偶数行仅显示 1 个产品。

关于如何让每一行显示 3 个产品有什么建议吗？

谢谢！

Answer 1

你应该试试 Flexbox https://jsfiddle.net/2Lzo9vfc/352/

ul.products {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  flex-wrap: wrap;
}

ul li {
  box-sizing: border-box;
  flex: 33.33%;
  padding: 25px;
}

<ul class="products">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem laborum cupiditate, fugit beatae commodi, nemo velit, ipsa odit amet dolorum in iusto aut quia officia reprehenderit temporibus necessitatibus ullam id.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod cumque, fugit non! Labore et ad voluptatum repudiandae dicta nobis odit. Repellendus magnam ex, alias autem quasi iure enim labore earum.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt harum nihil, odit repudiandae, mollitia vitae laboriosam doloribus fuga ea pariatur magnam consequatur, porro non nostrum inventore suscipit illo ullam ut!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis possimus ipsa autem voluptatibus. Voluptatibus vero veritatis, officiis sit, dignissimos optio porro omnis tempora, id libero officia. Exercitationem blanditiis nihil, sint.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio perferendis, error suscipit eos impedit corrupti reiciendis officiis itaque id, et, maxime dolores quas veniam natus autem. Dolorem iure sunt, assumenda?</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore illum, repellat, pariatur ea quae, consectetur, sunt molestias ex assumenda totam harum fugit. Excepturi ducimus obcaecati nobis ipsam consequuntur tenetur. Delectus.</li>
</ul>

Answer 2

保留 width: 33.333333333%; 并将其从您的代码中删除：

.product_item:nth-child(4n+1) {
    clear: both;
}

试图在每一行显示 3 个项目

Trying to display 3 items on every row

css

width