html - 如何使用纯 CSS 交换表格单元格

Question

我在寻找是否有人知道如何使用纯 CSS 交换表格单元格的位置。我有三个类似于下面的 div

#content {
  width: 1000px;
  display: table;
  float: none;
  vertical-align: top;
  border: 1px solid red;
}
#left {
  float: left;
}
#right {
  float: right;
}
#left, #right {
  width: 200px;
  display: table-cell;
  right: 600px;
  border: 1px solid grey;
}
#middle {
  width: 600px;
  display: table-cell;
  float: left;
  border: 1px solid grey;
  margin-left: 200px
}

<div id="content">
  <div id="left">some text and divs inside</div>
  <div id="right">some text and divs inside</div>
  <div id="middle">SOme more text and divs inside</div>
</div>

加载页面时，中间部分闪烁。所以我正在寻找一个很大的帮助来使用纯 CSS 交换左右的位置。

Answer 1

下面的代码对我有用。在评论中与 David 交谈后，代码概念取自 Facebook。多亏了他..

<div id="content">
      <div id="left">some text and divs inside</div>
      <div id="rightPart">
        <div id="right">some text and divs inside</div>
        <div id="middle">SOme more text and divs inside</div>
      </div>
    </div>


<style>
    #content{
          width: 1005px;
          display: table;
          float: none;
          vertical-align: top;
          border: 1px solid red;
        }
        #left{
          float:none;
        }
        #right{
          float:right;
        }
        #rightPart{
          float: none;
          vertical-align: top;
        }
        #left, #right{
          width: 200px;
          display: table-cell;
          border: 1px solid grey;
          vertical-align: top;
        }
        #middle{
          width: 600px;
          display: table-cell;
          float: none;
          border: 1px solid grey;
        }
        </style>