CSS表格，顯示的內容

的反向順序我知道這是一個有點流血的邊緣，但這裏的問題呢：CSS表格，顯示的內容

鑑於

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

...

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

..這給了我一個可愛的並排排列的div，左邊是#one，右邊是#two。

反正有沒有把#two放在左邊，#one在右邊，使用display: table-cell;，並且不改變HTML中div的順序？

我問，因爲我希望在HTML中保持＃以上＃一個以上的搜索引擎優化的原因，但我想#two是爲了審美的原因在＃的右側。我知道如何做到這一點使用浮動/絕對定位/邊距/等，但我想知道是否有一種方法，我可以使用較新的CSS表格顯示屬性（我更喜歡）。

有什麼想法？

來源

2009-07-16 neezer

雖然新的CSS功能很好，但我建議您使用跨瀏覽器兼容的解決方案。 `float：right;`在第一個或兩個元素上反轉元素的水平順序，同時仍然允許其他元素受其位置，寬度和高度的影響。 – Blixt 2009-07-16 16:17:45

我知道這一點，但對於這個網站，我可以負擔得起針對較新的瀏覽器，並採用較新的技術（HTML5和CSS3）。我知道現有的做法，我期待了解更新的方法。 – neezer 2009-07-16 16:24:59

你可以（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>

來源

2009-07-16 16:09:24 Greg

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

我用Flexbox的。您也可以更改div的數量。例如，將更多的div放在左邊的課程中，然後即使它們在之後聲明，它們也會放置在左邊。

我試過@Greg的例子，但它在IE上不起作用。

來源

2015-07-16 08:05:44

CSS表格，顯示的內容

回答

相關問題