使用CSS3

Question

我正在开发支持RTL的网站。所以我正在使用foreach重复我的div。

 <?php foreach ($list as $key => $row) { ?>
   <div>---contents---</div>
 <?php } ?>

像往常一样，它从左侧向右侧放置。

如何让div从左侧重复到右侧？

Answer 1

您正在寻找dir属性。这样的事情应该有效：

<dir dir="rtl">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
</dir>

添加这一位css以确保连续的divs布局：

div {
  display: inline-block;
}

See the plunkr.

Answer 2

您可以在容器元素上使用display: flex;和flex-direction: row-reverse。这将有一些你可能一直在寻找的额外效果（子元素的位置和大小）。

或者您将float: right;放在所有子元素上（并且放在容器的安全一侧，overflow: hidden;，以便后续元素位于正确的垂直位置）