Question

这是CSS / HTML文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="Workbook-S-140.css" rel="stylesheet" type="text/css" />
<title>CONGREGATION NAME Midweek Meeting Schedule</title>
<style type="text/css">
table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
table th, td {
    /* Comment out the following line if you do not want borders */
    border: 1px #d3d3d3 solid;
/* This is the default font for all cells */font-family: Calibri;
}
body {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    background: #666;
}
.containerPage {
    min-width: 210mm;
    max-width: 210mm;
    padding-left: 2mm;
    padding-right: 2mm;
    margin-left: auto;
    margin-right: auto;
    background: #FFF;
}
.containerMeeting {
    margin-bottom: 5mm;
}
.floatRight {
    color: gray;
    padding-top: 1mm;
    padding-bottom: 1mm;
    padding-right: 2mm;
    float: right;
    text-align: right;
    font-size: 8pt;
    font-weight: 700;
    text-transform: none;
}
.borderHEADINGOuter {
    border-bottom: 1px gray solid;
    margin-bottom: 5mm;
}
.borderHEADINGInner {
    border-bottom: 4px gray solid;
    margin-bottom: 2px;
}
.tableHEADING {
    width: 100%;
    border: none;
}
.tableHEADING td {
    border: none;
}
.textCongregation {
    vertical-align: bottom;
    text-align: left;
    font-size: 11pt;
    font-weight: 700;
    text-transform: uppercase;
}
.textTitle {
    vertical-align: bottom;
    text-align: right;
    font-size: 18pt;
    font-weight: 700;
}
</style>
</head>

<body>

<div class="containerPage">
    <div class="containerMeeting">
        <div class="borderHEADINGOuter">
            <div class="borderHEADINGInner">
                <table class="tableHEADING">
                    <colgroup>
                        <col width="50%" /><col width="50%" />
                    </colgroup>
                    <tr>
                        <td class="textCongregation">CONGREGATION NAME</td>
                        <td class="textTitle">Midweek Meeting Schedule</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

</body>

</html>

这是微笑：

https://jsfiddle.net/mL9j6zgz/

一切都很好。但是，如果我将 dir 属性更改为 rtl 并且 lang 属性更改为 ar ，则布局错误。正确交换了两个 div 对象，但文本对齐现在是错误的。他们需要逆转。

我知道我可以为RTL创建两个新的CSS类，并使用相反的文本对齐，但是无论如何浏览器可以管理它吗？我以为它会交换路线。我有道理吗？

英文：

<CONGREGATION NAME                     MIDWEEK MEETING SCHEDULE>

阿拉伯语：

<MIDWEEK MEETING SCHEDULE                     CONGREGATION NAME>

阿拉伯语 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" lang="ar" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="unsaved:///Workbook-S-140.css" rel="stylesheet" type="text/css" />
<title>CONGREGATION NAME Midweek Meeting Schedule</title>
<style type="text/css">
table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
table th, td {
    /* Comment out the following line if you do not want borders */
    border: 1px #d3d3d3 solid;
/* This is the default font for all cells */font-family: Calibri;
}
body {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    background: #666;
}
.containerPage {
    min-width: 210mm;
    max-width: 210mm;
    padding-left: 2mm;
    padding-right: 2mm;
    margin-left: auto;
    margin-right: auto;
    background: #FFF;
}
.containerMeeting {
    margin-bottom: 5mm;
}
.floatRight {
    color: gray;
    padding-top: 1mm;
    padding-bottom: 1mm;
    padding-right: 2mm;
    float: right;
    text-align: right;
    font-size: 8pt;
    font-weight: 700;
    text-transform: none;
}
.borderHEADINGOuter {
    border-bottom: 1px gray solid;
    margin-bottom: 5mm;
}
.borderHEADINGInner {
    border-bottom: 4px gray solid;
    margin-bottom: 2px;
}
.tableHEADING {
    width: 100%;
    border: none;
}
.tableHEADING td {
    border: none;
}
.textCongregation {
    vertical-align: bottom;
    text-align: left;
    font-size: 11pt;
    font-weight: 700;
    text-transform: uppercase;
}
.textTitle {
    vertical-align: bottom;
    text-align: right;
    font-size: 18pt;
    font-weight: 700;
}
</style>
</head>

<body>

<div class="containerPage">
    <div class="containerMeeting">
        <div class="borderHEADINGOuter">
            <div class="borderHEADINGInner">
                <table class="tableHEADING">
                    <colgroup>
                        <col width="50%" /><col width="50%" />
                    </colgroup>
                    <tr>
                        <td class="textCongregation">اسم الجماعة</td>
                        <td class="textTitle">برنامج اجتماع وسط الاسبوع</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

</body>

</html>

Answer 1

根据我们在主帖中讨论的评论，您可以使用属性选择器进行定位并交换文本方向：

[dir="rtl"] .textCongregation{ text-align: right; }
[dir="rtl"] .textTitle { text-align: left; }

详细了解属性选择器：

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

管理LTR和RTL的CSS方向

1 个答案: