Разные блоки в разные строки?

Question

Я имею такую разметку и изменить ее не могу:

<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 начинались с новой строки?

Answer 1

.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>

Answer 2

Вот вам решение на 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>

БЛОГ НА HUSL

Разные блоки в разные строки?

Ответы (2 шт):