Question

我有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/

Answer 1

rtl / ltr方向将起作用：）

＆＃13;

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; }

＆＃13;

<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>

＆＃13;

Answer 2

就像我在评论部分所说，如果允许jQuery，这是有效的解决方案（可能不是最好的，不确定）

$(function(){

    var elem = $("ul.right").parent("div.table");
    var ul_right = $("ul.right").remove();
    elem.append(ul_right);
})

http://jsfiddle.net/thisizmonster/g0x1o9bL/5/

如何从左到右切换css表格？

2 个答案: