Detailed explanation on the use of direction in CSS

1.

I rarely pay attention to the use of CSS direction in daily applications. Today I occasionally saw relevant content and found that CSS direction is often very convenient to use.

2. First of all, we need to pay attention to two important contents:

direction:ltr;//这个是默认值
direction:rtl

ltr is the initial value, which means left-to-right, which means from left to right.rtl is another value, the abbreviation of right-to-left, which means from right to left.

<p class="rtl">
	<img src="1.png"/>
	<img src ="2.png"/>
</p>

If you set the direction to p as the trl attribute, then 1.png will be on the right side. 2.png is on the left.

It should be noted that if the rtl attribute is set, the order of the text remains unchanged:

<p class="rtl"><span>span1</span> <span>span2</span></p>

Because only the left and right order of the inline element block is changed, all text, even if separated by inline tags, is actually , it is still a homogeneous inline box and is treated as a whole. Therefore, it only has an approximate right alignment effect, but there is no change in the left and right order of each text.

So what is an "inline element block"? Including replaced elements, such as a1f02c36ba31691bcfe87b2722de723b, bb9345e55eb71822850ff156dfde57c8, d5fd7aea971a85678ba271703566ebfd, 39000f942b2545a5315c57fa3276f220, 273238ce9338fbb04bee6997e5552b95, etc., or inline-block horizontal elements. Therefore, in the above examples of span1 and span2, if any span is set to display:inline-block, you will see changes in the left and right order.

The above is the detailed content of Detailed explanation on the use of direction in CSS. For more information, please follow other related articles on the PHP Chinese website!