1

我想知道是否有一个纯 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 解决方案。

4

2 回答 2

3

您可以使用浮动

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>

看小提琴

如果你想在另一个之上显示，这是我想出的唯一 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;（.first元素的数量）*（行高）。我不确定这里的跨浏览器兼容性，在 Chrome 上测试过。

查看更新的小提琴

于 2013-06-25T09:54:10.147 回答
0

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

于 2013-06-25T09:49:22.477 回答