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

我有三种类型的布局，我只是有麻烦与第三。 我在第二个布局中使用了基于css的表格，它有两列，因为它在高度方面具有灵活性。但是我不能把左列移到右边

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

正文{
利润率：10px自动；
宽度：80%
}
.包装纸{
利润率：10px；
宽度：100%；
}
菜单{
背景：橙色；
填充：10px
}
.内容{
背景：ddd；
填充：10px
}
/*表格布局*/
.桌子{
显示：表格；
表布局：固定；
}
.表ul.菜单，
.表.内容{
显示：表格单元格；
垂直对齐：顶部；
浮动：无
}
.表ul.菜单{
宽度：180px；
}
氢{
字体大小：粗体
}

原始布局



同工同酬、同工同酬、同工同酬、同工同酬、同工同酬、同工同酬、同工同酬
添加选择器“table”后的新布局



同工同酬、同工同酬、同工同酬、同工同酬、同工同酬、同工同酬、同工同酬
我需要帮助。（添加选择器“right”后，将菜单部分移到右侧）



同工同酬、同工同酬、同工同酬、同工同酬、同工同酬、同工同酬、同工同酬

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

---

rtl/ltr方向会起作用：）

正文{宽度：70%；边距：10px自动；}
.wrapper{宽度：100%}
.wrapper ul.menu{背景：橙色}
.wrapper.content{background:gray；}
.wrapper.table{显示：表；表布局：固定；}
.wrapper.table ul.菜单，
.wrapper.table.content{显示：表格单元格；方向：ltr；}
.wrapper.table ul.menu{宽度：180px；}
.wrapper.table.right{direction:rtl；}

同工同酬、同工同酬、同工同酬、同工同酬、同工同酬、同工同酬、同工同酬





同工同酬、同工同酬、同工同酬、同工同酬、同工同酬、同工同酬、同工同酬





同工同酬、同工同酬、同工同酬、同工同酬、同工同酬、同工同酬、同工同酬

我想你不能交换ul.menu和div.content在html中的位置，对吗？还允许jquery吗？为什么不在li中使用float:righttag@Gereltod是的，不能手动交换：）我有jquery将ul放在底部，但由于它是响应的，我想将布局返回到布局格式1，然后第三个布局出现另一个问题。@Tanya，ul应该在右边，不仅仅是li:）如果jquery允许，我可以很容易地做到。但如果不是，我在考虑css：有一个选择器，用于从父级捕获它。但是它目前工作不好。table:has（ul.right）ul，.table:has（ul.right）div.content{float:right！important；}谢谢，但是如果jquery是唯一的解决方案，那么当浏览器是例如400px时，有没有办法将ul返回到其原始位置？当然，有很多方法。例如，若您使用响应css，若屏幕大小小于400px，则可以删除类本身。所以jquery在那里不起作用。在jquery代码上，您还可以检查元素或显示的宽度，然后决定是否执行操作。例如：我仍然在考虑纯css解决方案。但效果不好。是的，css解决方案应该更好。顺便说一句，我试图调整浏览器的大小，但没有删除该类：）上面的版本没有活动处理程序。更改浏览器大小后，必须刷新浏览器。这一个有调整大小事件的侦听器：再次感谢！这是一个快速简单的解决方案！

$(function(){

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