CSS3를 사용하여 오른쪽에서 왼쪽으로 정렬/반복 부분

Question

RTL을 지원하는 웹 사이트를 개발 중입니다. 그래서 foreach를 사용하여 div를 반복합니다.

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

평소와 같이 왼쪽에서 오른쪽으로 배치됩니다.

div를 왼쪽에서 오른쪽으로 반복하려면 어떻게해야합니까?

Answer 1

dir 속성을 찾고 있습니다. 이런 식으로 뭔가 작업을해야합니다 :

div { 
    display: inline-block; 
} 

See the plunkr.

Answer 2

당신은 용기에 display: flex; 및 flex-direction: row-reverse을 사용할 수 있습니다 :

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

이 연속으로 확인 된 div 레이아웃을 만들기 위해 CSS의이 비트를 추가 요소. 이것은 당신이 찾고 있을지도 모르는 추가적인 효과 (자식 요소의 위치와 크기)를 가질 것입니다.

또는 당신은 (후속의 요소는 오른쪽 수직 위치에있을 수 있도록하고, 안전 측면에 컨테이너에 overflow: hidden;를 예정) 모든 자식 요소에 float: right;을 넣어