我可以从柱流中引入一些元素吗？

Question

希望我在标题中写了正确的问题，我会继续，因为我不太擅长用词，所以我会尽量保持简单。

所以我想要完成的是具有唯一 ID 设置为在列中显示的项目列表。如果特定 id 有它自己的样式（浮动并制作一个带有背景的块），我需要在列流/渲染时将其取出（这是正确的术语吗？）。这是否可能以及如何（试图避免 JS/jQuery）？ 这段代码：

div {
  height: 200px;
}
ul {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
#unique1,
#unique2 {
  float: left;
  display: block;
  width: 20%;
  height: 200px;
  border: 1px solid black;
}

<div>
  <ul>
    <li id="unique1">text</li>
    <li id="unique2">text</li>
    <li id="unique3">text</li>
    <li id="unique4">text</li>
    <li id="unique5">text</li>
    <li id="unique6">text</li>
    <li id="unique7">text</li>
    <li id="unique8">text</li>
    <li id="unique9">text</li>
    <li id="unique10">text</li>
  </ul>
</div>

下一段代码显示我想要实现的目标。

div {
  height: 200px;
}
ul {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
#unique1,
#unique2 {
  float: left;
  display: block;
  width: 20%;
  height: 200px;
  border: 1px solid black;
}

<div>
  <div id="unique1">text</div>
  <div id="unique2">text</div>
  <ul>
    <li id="unique3">text</li>
    <li id="unique4">text</li>
    <li id="unique5">text</li>
    <li id="unique6">text</li>
    <li id="unique7">text</li>
    <li id="unique8">text</li>
    <li id="unique9">text</li>
    <li id="unique10">text</li>
  </ul>
</div>

Answer 1

您不能仅使用 CSS 来做到这一点。您必须使用 Javascript 或 jQuery：

$('ul > li').each(function() {
    if ($(this).css('float') == 'left') {
        $(this).parent().before(this);
    }
});