css车身方向rtl出库

提问者：小点点

css车身方向rtl出库

嗯，我想做一个双语言网页，所以我做了两个样式表，一个rtl.css和另一个ltr.css，我有rtl样式表链接到我的HTML...它链接正确，我尝试改变背景颜色，它改变了...所以问题是，当我尝试下面的代码时，它根本不起作用…它仍然是ltr

:root{direction:rtl;}

我甚至试过：

body{direction:rtl}
html{direction:rtl}

我尝试指定“unicode-bidi：override；”和embed，但没有任何帮助

共1个答案

匿名用户

依赖多个CSS文件来提供相同样式的不同布局是一种糟糕的做法。既然你的问题还不是很清楚，我就试着帮你解决这个问题。首先，您应该包含一个单一的样式表，该样式表考虑了基于一个静态属性的特定组件的差异。例如，设置html标记的属性layout-dir以及lang属性。

<html lang="en" layout-dir="ltr">
...
</html>

无论您使用的是PHP、ASP.NET、React.js等，只要显示语言改变，这两个属性都必须改变。话虽如此，我们将基于layout-dir进行样式设计。例如，请考虑以下代码：

HTML

<div id="parent">
    <div class="child">...</div>
    <div class="child">...</div>
    <div class="child">...</div>
    <div class="child">...</div>
</div>

CSS

#parent {
    display: flex;
    align-items: center;
}
.child {
    flex-grow: 1;
}

现在，当布局方向为ltr时，我们希望从左侧开始呈现子DIV；否则，从右边。所以，我们说：

html[layout-dir="ltr"] #parent {
    flex-direction: row;
}

html[layout-dir="rtl"] #parent {
    flex-direction: row-reverse;
}

回到HTML标记中的属性，您可以设置layout-dir，如下所示：

PHP

<?php
<html lang="<?=$lang?>" layout-dir="<?=$dir?>">
...
</html>

JavaScript

const html = document.getElementByTagName("html");
html.setAttribute("lang", "en");
html.setAttribute("layout-dir", "ltr");