以从右到左的语言流动div

时间:2015-04-07 14:46:00

标签: javascript html css internationalization right-to-left

是否有可能在HTML中标记一组div,以便它们从左到右流动从左到右语言,从右到左流向右到左语言?也就是说,流程将取决于html lang属性的设置。例如,如果您有以下

<html lang="en">

标记的div的流程是从左到右,而如果语言是希伯来语(从右到左的语言)

<html lang="he">

标记的div的流程是从右到左。

2 个答案:

答案 0 :(得分:2)

同时使用dir属性。它可以继续div,因此您可以随时更改它。

<html lang="he" dir="rtl">

不要忘记:您可能需要担心一些CSS。我使用一个名为R2的项目来帮助解决这个问题。

答案 1 :(得分:1)

我使用CSS和jQuery来做。 JSFiddle:http://jsfiddle.net/pxztk9ne/

默认方向是leftToRight,如果指定的语言在rightToLeftLangs-array中,则具有此类的每个块都将向右浮动。 此外,目前您必须使用.html元素中的语言而不是html元素中的语言(jQuery第3行)

&#13;
&#13;
$(document).ready(function() {
    var rightToLeftLangs = ['he'];
    if($.inArray($('.html').attr('lang'), rightToLeftLangs) > -1) {
        $('.leftToRight').removeClass('leftToRight').addClass('rightToLeft');
    }
});
&#13;
.floating {
    position:relative;
    width:100px;
    height:100px;
    background:#eee;
}

.leftToRight {
    float:left;
}

.rightToLeft {
    float:right;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="html" lang="en"></div>
<div class="floating leftToRight">
    Some text
</div>
&#13;
&#13;
&#13;