检测div当前方向

Question

我有一个 div，它的方向由它托管的内容决定（使用dir="auto"）。我想使用CSS（如果比javascript不可能的话）来确定方向并相应地更改删除范围的绝对位置。

\n\n

请参阅此小提琴： https: //jsfiddle.net/psjgsnby/

\n\n

<div dir="auto" class="item">\n  text\n  <span>x</span>\n</div>\n<div dir="auto" class="item">\n  \xd7\x9e\xd7\x99\xd7\x9e\xd7\x99\xd7\x9f \xd7\x9c\xd7\xa9\xd7\x9e\xd7\x90\xd7\x9c\n  <span>x</span>\n</div>\n

\n\n

CSS：

\n\n

.item {\n  position: relative;\n  width: 200px;\n}\n.item span {\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n

\n\n

我正在寻找类似这样的选择器：

\n\n

.item span:dir(rtl) {\n  right: auto;\n  left: 0;\n}\n

\n\n

但可以跨浏览器工作（以上仅适用于 Firefox）

\n

Answer 1

我找到了一个解决方案，但它离你的代码很远。它的基础是display: table因为我们需要每个元素的动态方向流。\n不要忘记，您可以更改不同位置的垂直对齐。

\n\n

\r\n

\r\n

.item {\r\n  display: table;\r\n  width: 200px;\r\n  height: 50px;\r\n}\r\n\r\n.item .btn,\r\n.item .content {\r\n  display: table-cell;\r\n}\r\n\r\n.item .btn {\r\n  vertical-align: top;\r\n}\r\n\r\n.item .content {\r\n  width: 100%;\r\n  vertical-align: bottom;\r\n}

\r\n

<div dir="auto" class="item">\r\n  <span class="content">text</span>\r\n  <span class="btn">\r\n    x\r\n  </span>\r\n</div>\r\n<div dir="auto" class="item">\r\n  <span class="content">\xd7\x9e\xd7\x99\xd7\x9e\xd7\x99\xd7\x9f \xd7\x9c\xd7\xa9\xd7\x9e\xd7\x90\xd7\x9c</span>\r\n  <span class="btn">\r\n    x\r\n  </span>\r\n</div>

\r\n

\r\n

\r\n

\n\n

小提琴演示

\n