手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

HTML的Div水平垂直排列

时间:2024-10-13 09:41:41

1、首先呢,你得知道div标签的属性,暂时这个排序只需要它的两个属性,就是float(浮动)和clear(清除)两个属性

HTML的Div水平垂直排列

2、先解释一下float浮动,float让元素漂浮起来,浮动元素之间不会重叠 ;其他元素占用浮动元素原有位置 ;浮动元素如果和祈硗樘缎其他元素重叠,但将其他元素的内容挤出浮动元素范围。以上的你可以慢慢去尝试,我先做个简单例子,也就是两个div水平排列,结果在下一步,这步是代码

HTML的Div水平垂直排列

3、垂直排序排序就不用说了,就直接不使用float,默认为垂直排序。但是如果有三个div盒子要求排成如图中的排序,你该如何做呢?

HTML的Div水平垂直排列

4、首先我们了解了clear属性,也就是清除它左右的浮动,根据取值不同而清除也不同,clear的作用,ps:一定要注意,并不是说哪边(哪个方向)的元素不浮动,而是通过改变自身位置(一般下移),让新位置那个方向没有浮动元素了,下面我解释一下

HTML的Div水平垂直排列

5、如图我的代码,我想盒子2不和盒子1在水平排列,但是想盒子3和盒子2水平排列,所以呢我就在盒子2处加了个clear:left表达盒子2不想左边有浮动,所以向下移动了一下,收墩芬蓥然后盒子3在设个float:left和盒子2设个float:left就可以水平了。如果觉得小编写得好的话,谢谢您给小编投个票点个赞

HTML的Div水平垂直排列
© 手抄报圈