html - 如何从左到右切换CSS表单元格？

我有3种类型的布局，我只是遇到了第三种麻烦。
我将基于css的表用于第二布局，具有两列，因为它在高度方面具有灵活性。但是我无法将左列移到右边。

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/

最佳答案

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>

关于html - 如何从左到右切换CSS表单元格？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29340146/