Question

我想知道是否有一个纯css解决方案首先显示具有给定类的div，而没有该类的div最后，与它们在html代码中出现的顺序无关。

例如，对于这个html：

<div>6</div>
<div class="first">1</div>
<div class="first">3</div>
<div>2</div>
<div class="first">5</div>
<div>4</div>

div应按此顺序显示在另一个下方：

1,3,5,2,4,6

注意：

我知道如何解决javascript中的问题，我想知道是否存在纯css解决方案。

Answer 1

你可以使用float

CSS

#container > div { display: inline-block; }
#container > div.first { float: left; }

HTML

<div id="container">
<div>6</div>
<div class="first">1</div>
<div class="first">3</div>
<div>2</div>
<div class="first">5</div>
<div>4</div>
</div>

请参阅the fiddle

如果你想显示一个在另一个之上，这是我想出的唯一一个hacky解决方案：

#container { width: 100px; }
#container > div { display: inline-block; float: right; position: relative;
  width: 50px; left: -50px; top: 45px; font-size: 15px; line-height: 15px; }
#container > div.first { float: left; left: 0; top: 0; }

hack是top: 45px;，它是（第一个元素的数量）*（行高）。我不确定这里的跨浏览器兼容性，在Chrome上测试过。

请参阅the updated fiddle

Answer 2

您可以使用CSS更改外观和布局，但不能更改结构。这是DOM操作和行为，出于理智的缘故属于脚本环境。为什么不使用单独的语义类而不是通用的“第一”类呢？

首先显示给定类的div

注意：

2 个答案: