html - 如何从左到右切换 css table-cell？

Question

我有 3 种布局类型，我只是在使用第三种时遇到了问题。我将基于 css 的表格用于具有两列的第二个布局，因为它在高度方面具有灵 active 。但我无法将左栏移到右栏。

html 标记应保持原样。只允许选择器。请帮我玩一下。谢谢大家!

body {
  margin: 10px auto;
  width: 80%
}
.wrapper {
  margin: 10px;
  width: 100%;
}
ul.menu {
  background: orange;
  padding: 10px
}
.content {
  background: #ddd;
  padding: 10px
}
/* table layout */

.wrapper.table {
  display: table;
  table-layout: fixed;
}
.table ul.menu,
.table .content {
  display: table-cell;
  vertical-align: top;
  float: none
}
.table ul.menu {
  width: 180px;
}
h2 {
  font-weight: bold
}

<h2>Original layout</h2>
<div class="wrapper">
  <ul class="menu">
    <li><a href="#">menu</a></li>
  </ul>
  <div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
  </div>
</div>

<h2>New layout after adding the selector "table"</h2>
<div class="wrapper table">
  <ul class="menu">
    <li><a href="#">menu</a></li>
  </ul>
  <div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
  </div>
</div>

<h2>Need help with this. (bring menu section to the right after adding the selector "right")</h2>
<div class="wrapper table">
  <ul class="menu right">
    <li><a href="#">menu</a></li>
  </ul>
  <div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
  </div>
</div>

jsFiddle:http://jsfiddle.net/g0x1o9bL/1/

Answer 1

rtl/ltr 方向就可以了:)

body { width:70%;margin:10px auto; }

.wrapper { width:100% }
.wrapper ul.menu { background:orange }
.wrapper .content { background:gray;}

.wrapper.table { display:table;table-layout:fixed;}
.wrapper.table ul.menu,
.wrapper.table .content { display: table-cell; direction: ltr;}
.wrapper.table ul.menu { width:180px; }

.wrapper.table.right { direction: rtl; }

<div class="wrapper">
  <ul class="menu">
    <li><a href="#">menu</a></li>
  </ul>
  <div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
  </div>
</div>
<br>
<div class="wrapper table">
  <ul class="menu">
    <li><a href="#">menu</a></li>
  </ul>
  <div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
  </div>
</div>
<br>
<div class="wrapper table right">
  <ul class="menu">
    <li><a href="#">menu</a></li>
  </ul>
  <div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
  </div>
</div>