웹 레이아웃에서 방향:rtl 사용에 대한 자세한 설명

아마도 세계의 대부분의 언어는 왼쪽에서 오른쪽으로 읽히기 때문에 방향:rtl에 대한 정보가 많지 않습니다. 텍스트를 오른쪽에서 왼쪽으로 쓰는 특정 동작은 유니코드로 정의되어 있지만 우리가 고려하고 싶은 것은 아닙니다. 우리에게 필요한 것은 블록 수준 상자에서 오른쪽에서 왼쪽으로 쓰기가 미치는 영향의 관련 특성을 사용하여 기본 레이아웃을 만드는 것입니다.
　콘텐츠를 오른쪽으로 이동하려면 일반적으로 text-align:right를 사용하지만 이는 콘텐츠를 오른쪽 정렬로 만드는 것입니다. 즉, 요소를 오른쪽으로 밀어 넣는 것입니다. 때때로 콘텐츠를 오른쪽으로 하나씩 정렬해야 하는 경우가 있으므로 flat:right가 사용됩니다. 그러나 float:right에도 문제가 있습니다. Float 자체로 인해 콘텐츠가 스트림 밖으로 흘러 컨테이너가 붕괴됩니다. 이를 수정하려면 다른 조치가 필요합니다.
　사용 방향:rtl은 다른 부작용 없이 부동 소수점 효과를 얻을 수 있지만 전제는 하위 요소가 블록 수준 요소여야 한다는 것입니다. RTL은 유니코드의 문자 속성을 기반으로 일부 문자에 대해 특수 처리를 수행하기 때문에 인라인 수준 요소는 RTL에서 예상치 못한 결과를 초래할 수 있습니다. 특정 처리 방법은 매우 복잡하므로 이 기사에서는 언급하지 않습니다. 즉, 이 rtl이 레이아웃 전용인 경우 하위 요소에 인라인 수준 요소를 사용하지 마세요.

<style>
body {font:14px/18px Consolas;}
div {
  width:100px;padding:10px;
  margin:10px 0px 30px 0px;
  border:1px solid #CCC;
}
.float {overflow:hidden;} /*加overflow防止容器坍缩*/
.float span {float:right;}
.align {text-align:right;}
.align span {text-align:left;}
.direction {direction:rtl;}
.direction span {direction:ltr;display:inline-block;}
</style>
float right
<div class="float">
  <span>次</span><span>碳</span><span>酸</span><span>钴</span>
</div>
align right
<div class="align">
  <span>次</span><span>碳</span><span>酸</span><span>钴</span>
</div>
direction rtl
<div class="direction">
  <span>次</span><span>碳</span><span>酸</span><span>钴</span>
</div>

사실 방향 스타일은 매우 깊은 주제입니다. 여기서는 레이아웃의 기본 속성 중 하나를 사용합니다. 다른 속성은 유니코드의 문자 속성으로 시작해야 하며 관련된 unicode-bidi 스타일도 있습니다. 아랍어나 고대 중국 프로젝트를 진행하지 않는다면 기본적으로 사용하지 않을 것이므로 일반적으로 깊이 공부할 필요는 없고 이해만 하면 됩니다.

위 내용은 웹 레이아웃에서 방향:rtl 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!