Question

我有一个带有框的容器，在单击按钮时使用transformX可以在边界内（如缩略图滚动）在框内左右移动。容器以transform开始：translateX（0px）;。我正在为translationX使用px值，我的数学就是基于此。问题是当我测试dir = rtl网站时，容器被翻转了。什么也是处理rtl方向的最简单方法？我非常确定我什至不想知道javascript中的目录。

这只是一个粗略的演示，它不会滑动或任何其他内容，只是为了澄清。

.wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 500px;
  height: 100px;
  overflow: hidden;
}

.container {
  position: absolute;
  width: 1450px;
  transform: translateX(0px);
}

.box {
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 1px;
  background: red;
}

<html dir="rtl">

<div class="wrap">
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
    <div class="box">11</div>
    <div class="box">12</div>
    <div class="box">13</div>
    <div class="box">14</div>
  </div>
</div>

Answer 1

使用CSS检测RTL并覆盖必要的值：

[dir="rtl"] .wrap {
    ...
}

[dir="rtl"] .container {
    ...
}

[dir="rtl"] .box {
    ...
}

根据您要实现的目标，您可能最终会为translateX使用相同像素大小的负值。您可能还需要覆盖任何以左或右为中心的样式（左，右边界，浮动等）

Answer 2

我认为问题在于您使用的是float:left，我已经将Box的css修改为使用display:inline-block，看看它是否是您要的内容。

.wrap {
  position: absolute;
  width: 400px;
  height: 100px;
  overflow: hidden;
}

.container {
  position: absolute;
  width: 1450px;
  transform: translateX(500px);

}

.box {
  position: relative;
  display:inline-block;
  width: 100px;
  height: 100px;
  margin-right: 1px;
  background: red;
}

<html dir="rtl">

<div class="wrap">
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
    <div class="box">11</div>
    <div class="box">12</div>
    <div class="box">13</div>
    <div class="box">14</div>
  </div>
</div>

Answer 3

float:left CSS不需要.box。相反，添加display:inline-block;，它将开始双向运行。

请参见下面的代码段。

.wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 500px;
  height: 100px;
  overflow:hidden;
}

.container {
  position: absolute;
  width: 1450px;
  transform: translateX(0px);
}

.box {
  position: relative;
  width: 100px;
  height: 100px;
  margin-right: 1px;
  background: red;
  display:inline-block;
}

<html dir="rtl">

<div class="wrap">
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
    <div class="box">11</div>
    <div class="box">12</div>
    <div class="box">13</div>
    <div class="box">14</div>
  </div>
</div>

CSS transformX和dir rtl

3 个答案: