javascript - 使用 RTL 时强制全宽问题

标签 javascript html css

我使用高级网格插件并在 css 文件中设置方向:“rtl”我正在尝试使用此代码强制全宽

<?php if($force_full_width == 1) { ?>
<script type="text/javascript">
     function force_full_width_<?php echo $advanced_id; ?>() {
          var p = $(".standard-body .full-width .advanced-grid-<?php echo $advanced_id; ?>");
          if(p.size() > 0) {
               p.width($('body').width());
               p.css("left", "0px");
               var position = p.offset();
               p.css("left", "-" + position.left + "px");
               p.find(".container").css("padding-left", position.left);
               p.find(".container").css("padding-right", position.left);
          }

          var s = $(".standard-body .fixed .advanced-grid-<?php echo $advanced_id; ?>");
          if(s.size() > 0) {
               s.width($('.standard-body .fixed .pattern').width());
               s.css("left", "0px");
               var position = s.offset();
               var position2 = $('.standard-body .fixed .pattern').offset();
               var position3 = position.left-position2.left;
               s.css("left", "-" + position3 + "px");
               s.find(".container").css("padding-left", position3);
               s.find(".container").css("padding-right", position3);
          }

          var b = $(".standard-body .fixed2 .advanced-grid-<?php echo $advanced_id; ?>");
          if(b.size() > 0) {
               b.width($('body').width());
               b.css("left", "0px");
               var position = b.offset();
               b.css("left", "-" + position.left + "px");
               b.find(".container").css("padding-left", position.left);
               b.find(".container").css("padding-right", position.left);
          }

          var c = $(".fixed-body .advanced-grid-<?php echo $advanced_id; ?>");
          if(c.size() > 0) {
               c.width($('.fixed-body .main-fixed').width());
               c.css("left", "0px");
               var position = c.offset();
               var position2 = $('.fixed-body .main-fixed').offset();
               var position3 = position.left-position2.left;
               c.css("left", "-" + position3 + "px");
               c.find(".container").css("padding-left", position3);
               c.find(".container").css("padding-right", position3);
          }
     }

     force_full_width_<?php echo $advanced_id; ?>();

     $(window).resize(function() {
          force_full_width_<?php echo $advanced_id; ?>();
     });
</script>
<?php } ?>

在 ltr 中,它的工作就像这张图片一样好

http://i.stack.imgur.com/l9rTi.jpg

但是在 rtl 语言中得到像这个图像这样的空白空间

http://i.imgur.com/ny2hvt5.jpg

如何使它在 rtl 方向上很好地工作

最佳答案

由于没有提供 HTML,因此无法确定实际问题是什么,所以我们根本无法知道 Javascript 的哪一部分正在处理屏幕捕获的哪一部分。

但是,对于正确方向的一些提示,似乎对这种样式使用 Javascript 会使问题过于复杂。这个问题应该可以主要通过 CSS 来解决,而 Javascript 只需在语言更改时显示/隐藏所需的 div。只需使用 100% 宽度的容器,然后将元素放入容器内即可解决问题。

关于javascript - 使用 RTL 时强制全宽问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35091490/

相关文章:

javascript - 使用 JavaScript 计算两个日期之间的周数

php & MySQL - 允许用户更新他们的详细信息

html - 带有 &lt;style&gt; 标签的 SVG 动画问题

css 从子域加载图像

javascript - CSS 中过渡属性的动态值

java - jquery datatables 未定义不是一个函数

javascript - 生成新的验证 token

javascript - 不能使用 2 个 js 函数,它们之间有 sleep

html - Hosted Bootstrap 3.2 使无响应

javascript - 将背景位置垂直移动一定值?