使用 RTL 方向时切换侧边栏答案

【问题标题】：Switching sidebar when using RTL direction使用 RTL 方向时切换侧边栏
【发布时间】：2014-04-12 13:22:49
【问题描述】：

我有一个这样的侧边栏：

小提琴：http://jsfiddle.net/mavent/m56wW/20/

<div class="my_sidebar"> <i style="border: 1px solid blue;" class="glyphicon glyphicon-chevron-left"></i><br>
.my_sidebar {top: 60px;bottom:0;left:0;position: fixed;width: 30px;height: 100%;background-color: #fa0;border: 1px solid red;opacity: 0.9;z-index:51;}

此侧边栏固定在左侧。
它从顶部的 +60px 开始，宽度为 30px。这适用于 LTR。
但是当我将方向更改为 RTL 时，此侧边栏不会转到右侧。因为left:0px。

添加一个像.my_sidebar_rtl 这样的新类，将right:0; 放入其中并包含它是一种选择。

但我想知道是否有可能通过一个 my_sidebar 类获得这种行为？

【问题讨论】：

标签： html css

【解决方案1】：

根据文本方向处理布局的最简单方法如下：

LTR

<html>

RTL

<html dir="rtl">

CSS

.my_sidebar {
    left: 0;
    ...
}

[dir="rtl"] .my_sidebar {
    left: auto;
    right: 0;
}

http://jsfiddle.net/coma/UbW4W/

【讨论】：

好吧，my_sidebar 不是html 标签的直接子元素。它存在于细分中。这在那种情况下有效吗？
是的，它会起作用（CSS 中的子选择器是 >）...让我告诉你，等等...
@trante，检查 jsfiddle，播放添加 div 和添加/删除 dir 属性。我与 RTL 合作过很多次......