Question

这听起来很疯狂，但请耐心等待。我正在写一个基本上由以下内容组成的页面：

<div id="container">
    <div id="child1">...</div>
    <div is="child2">...</div>
</div>

我希望页面显示不同，具体取决于它是为屏幕渲染还是打印，通过媒体查询的魔力实现。特别是，在打印时，我希望{<1}}出现在 #child2之前的页面上。

有没有办法可以在不诉诸javascript的情况下交换订单，最好没有令人讨厌的绝对定位等等？

我应该补充一点，“之前”在此上下文中的意思是“直接在...”

Answer 1

是的，使用弹性框 - http://jsfiddle.net/F8XMk/

#container{
  display: flex;    
  flex-flow: column;
}

#child1{
  order: 2;
}

#child2{
  order: 1;    
}

较新的浏览器支持flex非常好。你也可以用负边距破解你的方式：）

Answer 2

不，在纯CSS中无法做到这一点。 CSS侧重于表示部分，而不是正在显示的数据的结构。

我想到的最好的事情是重复内容：

<div class="child1 even">...</div>
<div class="child2 odd">...</div>
<div class="child1 odd">...</div>
<div class="child2 even">...</div>

并将odd类隐藏在一个视图中，even隐藏在另一个视图中。

它不是很好，在某些情况下它可能带有SEO副作用，我不确定。

这是我想到的唯一不涉及服务器端处理或JavaScript的方式。

Answer 3

以下代码将对您的问题进行排序，并且根据caniuse.com与IE7及以下版本的所有浏览器兼容。

完全支持CSS表格显示can be found here

<强> HTML

<div id="container">
    <div id="child1">1</div>
    <div id="child2">2</div>
</div>

<强> CSS

#child2 {
    display:table-header-group;   
}
#child1 {
    display:table-footer-group;    
}

Answer 4

你可以这样做：

<div id="container">
<div id="child1">Content 1</div>
<div id="child2">Content 2</div>
<div id="child3">Content 1</div>
</div>

显示的Css：

#child3 {display: none}

Css for Print：

#child1 {display: none}

Answer 5

您可以使用 flex 来实现这一点

 <div id="container">
        <div id="child1">1</div>
        <div id="child2">2</div>
    </div>
    
   #container {
    display: flex; 
    flex-direction: row-reverse;  
}

我可以使用CSS来反转两个元素的显示顺序吗？

5 个答案: