使用CSS3从右到左排列/重复Div

Question

I am developing website which support RTL. So I am repeating my div using foreach.

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

as usual it is placing from left side to right side.

How can I make div repeating from left side to right side?

Answer 1

You are looking for the dir attribute. Something like this should work:

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

Add this bit of css to make sure the divs layout in a row:

div {
  display: inline-block;
}

See the plunkr.

Answer 2

You can either use display: flex; and flex-direction: row-reverse on the container element. This will have some additional effects which you even might have been looking for (position and size of child elements).

Or you put float: right; on all the child elements (and to be on the safe side, overflow: hidden; on the container, so that subsequent elements will be at the right vertical position)