CSSテーブル、表示されるコンテンツ

Question

の反転順序は、私は、これは少し出血エッジである知っているが、ここで問題は、とにかくだ：

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

を考えると...

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

を..これは左側の#oneと右側の＃2のdivの素敵な並置を私に与えてくれます。

display: table-cell;を使用して、左側に#two、右側に#oneを配置し、HTMLのdivの順序を変更しないでください。

私はSEOの理由で#twoを＃2上に保ちたいと思っていますが、審美的理由から#twoを#oneの右側にしたいと思います。私は浮動小数点/絶対位置/余白/等を使用してこれを行う方法を知っていますが、新しいCSSテーブルの表示プロパティを使用して行うことができる方法があるかどうかは疑問でした。

どのような考えですか？

Answer 1

することはでき（AB）は、先に悪テキスト方向警告を使用します。

<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> 

Answer 2

<div class="container"> 
     <div class="middle" style="background-color: blue;"> 
      <h4>Left Col placed middle</h4> 
      <p>...</p> 
     </div> 
     <div class="right" style="background-color: red;">   
      <h4>Middle Col placed right side</h4> 
      <p>...</p> 
     </div> 
     <div class="left" style="background-color: yellow;"> 
      <h4>Right Col placed left side</h4> 
      <p>...</p> 
     </div> 
    </div> 

<style type="text/css"> 
    .container { 
     display: flex; 
    } 
    .container > .left{ 
     order:1; 
    } 
    .container > .middle{   
     order:2; 
    } 
    .container > .right{ 
     order:3; 
    } 

    .left, .middle, .right { 
     display:table-cell;   
    } 
</style> 

私はフレキシボックスを使用しています。 divの数を変更することもできます。例えば、左のクラスでより多くのdivを置くと、後で宣言されても左側に配置されます。

@Gregサンプルを試しましたが、IEでは動作しません。