Question

我网站的主要样式表中的div元素按特定顺序排列。在我的打印样式表中，我希望使用纯CSS重新排列div元素的顺序。我怎么能这样做？

在我的主样式表中将这些设为div：

a d

b e

c f

我希望它在我的打印样式表上看起来像这样（我删除了非打印机友好的div）：

a

f

c

d

Answer 1

您可以删除不需要的div并堆叠剩余的div，如下所示......

http://jsfiddle.net/ywTJy/2/


div {
    width: 50%;
    background-color: #ccc;
    float: left;
}

/* print CSS */

div {
    float: none;
    width: 100%;
}

#b, #e {
    display: none;
}

我不确定你是否有意将“F”div移到第二位置，但如果您将内容单向订购并重新订购以进行打印，则似乎很尴尬。

Answer 2

取决于您“想要”如何定位它们，并且有很多方法可以使用CSS。最简单的基本方法是在页面周围移动div，使用position：absolute和相应调整top / left / etc CSS属性。我认为它应该仍然适用于打印精细。

请注意，我不会“单独”依赖绝对定位的项目来设计网页，但这是一种方式。

Answer 3

如果内容流动和/或动态，您将遇到问题。如果您可以可靠地知道项目彼此之间的关系，您可以执行以下操作：

<div style="width:100px;position:relative;left:100px">
<div style="width:100px;position:relative;left:-100px">

哪个会交换两个并排div的视觉位置。

Answer 4

通常，否：您不能使position:static项（默认值）以不同的顺序流动。 CSS更改会更改元素的显示，但是内容中的语义与表示内容之间存在模糊界限。就像一个句子和段落在逻辑上跟随另一个，你不能使用CSS来改变内容的含义。

使用纯CSS重新排列div元素

4 个答案: