主页 / 问题 / 1081916
Accepted
Oiki
Asked:2020-02-13 06:05:13 +0800 CST2020-02-13 06:05:13 +0800 CST

不同行中的不同块？

  • 772

我有这个标记，我不能改变它：

<ul class="products columns-4">
   <li class="product-category product first">	 </li>
   <li class="product-category product"> </li>

   <li class="product type-product"> </li>
   <li class="product type-product"> </li>
   <li class="product type-product"> </li>
   <li class="product type-product"> </li>
</ul>

所有块一个接一个（即连续）。块product-category， product type-product 可以是不同的数字。

如何使带有类的块product type-product在新行上开始？

css

2 个回答

  1. Best Answer

    这是适合您的 CSS 解决方案。

    该类的第一个元素以红色突出显示product type-product，新行从该元素开始。你的任务解决了。

    li {
  display: inline-block;
  float: left;
  width: 30px;
  height: 30px;
  margin: 5px;
  background-color: chocolate;
}

.products>.product-category+ :not(.product-category) {
  clear: both;
  background-color: red;
}
    <ul class="products columns-4">
  <li class="product-category product first"> 1</li>
  <li class="product-category product">2 </li>

  <li class="product type-product"> 3</li>
  <li class="product type-product"> 4</li>
  <li class="product type-product"> 5</li>
  <li class="product type-product"> 6</li>
</ul>

    • 3 

  2. .products > li {
  float: left;
  width: 100px;
  height: 100px;  
  border: 1px solid #0f0;
 }
 .products > li.product.type-product {
  clear: left
 }
    <ul class="products columns-4">
   <li class="product-category product first"></li>
   <li class="product-category product"></li>

   <li class="product type-product"></li>
   <li class="product type-product"></li>
   <li class="product type-product"></li>
   <li class="product type-product"></li>
</ul>

    • 1

相关问题