CSS表格，反转显示内容的顺序 [英] CSS Tables, Invert order of displayed content

问题描述

给定

 < div id =one> First Div< / div> 
< div id =two> Second Div< / div> 
  

...

  #one，#two {display：table-cell; } 
  

...这给了我一个可爱的并排排列的div与#one

有没有把#two放在左边，#one放在右边，使用显示在左边和#two在右边。 ：table-cell; ，并且不改变HTML中div的顺序？

我问，因为我想保留＃为了SEO目的，在HTML中#two以上，但是我想#two为了美观的原因在#one的右边。我知道如何使用浮动/绝对定位/边距/等，但我想知道是否有办法使用新的CSS表格显示属性（我更喜欢）。

有什么想法？

解决方案

您可以（ab）使用文字方向 ，提前恶意：

 < div id =container> 
< div id =one> First Div< / div> 
< div id =two> Second Div< / div> 
< / div> 
 
< style> 
 #container {方向：rtl; } 
 #one，#two {display：table-cell;方向：ltr;} 
< / style> 
  

I know this is a bit bleeding edge, but here's the question anyway:

Given

<div id="one">First Div</div>
<div id="two">Second Div</div>

...

#one, #two { display: table-cell; }

... which gives me a lovely side-by-side arrangement of the div's with #one on the left and #two on the right.

Is there anyway to put #two on the left and #one on the right, using display: table-cell;, and without changing the order of the divs in the HTML?

I ask, because I'd like to keep #one above #two in the HTML for SEO reasons, but I'd like #two to be to the right of #one for aesthetic reasons. I know how to do this using floats/absolute positioning/margins/etc., but I was wondering if there was a way I can do it using the newer CSS table display properties (which I much prefer).

Any thoughts?

解决方案

You can (ab)use the text direction warning, evil ahead:

<div id="container">
    <div id="one">First Div</div>
    <div id="two">Second Div</div>
</div>

<style>
    #container { direction: rtl; }
    #one, #two { display: table-cell; direction: ltr;}
</style>

这篇关于CSS表格，反转显示内容的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！