特定的浮动元素

Question

我有标准的浮动网格，比如：

ul li{
   width:300px;
   float:left;
}

我需要将第 4 个元素放在第 3 个元素之下。就像图片上的那样。

感谢您的指教！

Answer 1

有点像胶带解决方案，但可以通过将第 3 列和第 4 列放在同一个容器中来解决吗？

例如：

<ul>
  <li>
      (Column 1)
  </li>
  <li>
      (Column 2)
  </li>
  <li>
      <div style="float:left;">
          (Column 3), (Column 4)
      </div>
  </li>
  <li>
      (Column 5)
  </li>
</ul>

Answer 2

所以这是一个基于 ForeverStuck 想法的解决方案。
小jQuery:

//Select element3 and 4 wrap them as li
$('ul > li:nth-child(3), ul > li:nth-child(4)').wrapAll( "<li />");
//Then unwrap inside li elements, so 3 and 4 become 3 element
$('.homepage .box-category > li > li > a').unwrap();

特定的浮动元素

Specific floating elements

css

css-float