首页  >  文章  >  web前端  >  CSS中关于direction使用的详解

CSS中关于direction使用的详解

黄舟
黄舟原创
2017-07-27 14:30:202733浏览

一、

在平常的应用中很少关注CSS direction的使用,今天偶尔看到相关内容,才发现CSS direction使用起来很多时候很方便。

二、首先我们需要关注两个重要的内容:

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

ltr是初始值,表示left-to-right,就是从左往右的意思.rtl则是另外一个值,right-to-left缩写,就是从右往左的意思。

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

如果给p设置direction为trl属性,则1.png就会在右侧,2.png在左侧。

需要注意的是如果是设置rtl属性的时候文字的前后顺序是不变的:

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

因为改变的只是内联元素块的左右顺序,所有的文字,即使使用内联标签分隔,实际上,还是一个同质内联盒子,是当作一个整体处理的,因此,只有近似右对齐效果,而具体每个文字都没有左右顺序的变化。


那什么是“内联元素块”呢?包括替换元素(replaced element),如a1f02c36ba31691bcfe87b2722de723b, bb9345e55eb71822850ff156dfde57c8, d5fd7aea971a85678ba271703566ebfd, 39000f942b2545a5315c57fa3276f220, 273238ce9338fbb04bee6997e5552b95等,或者inline-block水平的元素。因此,上面span1, span2的例子,只有任意一个span设置display:inline-block,都会看到左右顺序的变化。

以上是CSS中关于direction使用的详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn