如何使用纯 CSS 交换表格单元格答案

【问题标题】：How to interchange table cells using Pure CSS如何使用纯 CSS 交换表格单元格
【发布时间】：2013-08-12 17:29:58
【问题描述】：

我正在寻找是否有人知道如何使用纯 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 交换左右的位置。

【问题讨论】：

您为什么认为更改div 元素的位置/顺序将解决“闪烁”问题（假设是您要解决的问题处理）？
@David，感谢您的快速回复，实际上这是我最后一次尝试。事情是中间div有很多内容假设像facebook。我有一些php代码可以根据里面的一些文本来改变中间内容的宽度。
如果浮动一个表格单元格元素，它不再是一个表格单元格。
How can I avoid a “Flash of Unstyled Content” using fixed-width cells in CSS Tables?的可能重复

标签： html css css-tables

【解决方案1】：

以下代码对我有用。在与 cmets 中的 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>

【讨论】：