CSS transformX和目录rtl
CSS transformX和目录rtl
提问于 2018-10-25 01:33:44
我有一个带有框的容器，它在边界内从左到右移动(就像一个缩略图滚动)，在按钮单击时使用transformX。容器以transform开头: translateX(0px)；。我对translateX使用px值，我的数学就是以此为基础的。问题是当我测试dir=rtl网站时，容器被翻转了。处理rtl方向的最简单方法是什么？我非常确定我甚至不想知道javascript中的dir。
这是一个粗略的演示文稿，它没有幻灯片或任何东西，只是为了澄清。
.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>
回答 3
Stack Overflow用户
发布于 2018-10-25 01:40:35
使用CSS检测RTL并覆盖所需的值：
[dir="rtl"] .wrap {
...
}
[dir="rtl"] .container {
...
}
[dir="rtl"] .box {
...
}根据你想要达到的效果，你可能最终会使用相同像素大小的负值来转换X。你也可能需要覆盖任何左或右聚焦的样式(左，边距-右，浮点，等等)。
Stack Overflow用户
发布于 2018-10-25 01:54:34
我认为问题是你正在使用float:left，我已经修改了你的css for box来使用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>
Stack Overflow用户
发布于 2018-10-25 02:36:16
对于.box css，您不需要float:left。相反，添加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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52974931
复制相关文章
相似问题
腾讯云开发者
