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表格，显示的内容

回答

相关问题