博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
学习杂记(如何让两个div在同一行)
阅读量:5340 次
发布时间:2019-06-15

本文共 594 字,大约阅读时间需要 1 分钟。

时不时会要记着一些东西,以防自己忘记总结。

CSS浮动

 

div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。

在div的标准流中,无论div多小,它都独占一行,相互没有交集。

 

但是很多地方要使两个或者多个div处于一行,这时候要对操作div设置浮动属性。设置浮动后就不再属于标准流,成为一个新的流。又因为浮动是漂浮在标准流之上的。所以刚设置会出现下图情况。(div2是设置的浮动属性:左浮动(float:left;))

 

 

如果我们把div2采用右浮动

就会变成这样。

当设置了多个浮动div元素后,把div2和div3都加上左浮动

由于div2、div3浮动,它们不再属于标准流,因此div4会自动上移,与div1组成一个“新”标准流,而浮动是漂浮在标准流之上,因此div2又挡住了div4。

总结下重点

 假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。

       div的顺序是HTML代码中div的顺序决定的。

       靠近页面边缘的一端是,远离页面边缘的一端是

 

 

转载于:https://www.cnblogs.com/tongsuh/p/10020930.html

你可能感兴趣的文章
DCDC(4.5V to 23V -3.3V)
查看>>
kettle导数到user_用于left join_20160928
查看>>
较快的maven的settings.xml文件
查看>>
随手练——HDU 5015 矩阵快速幂
查看>>
Maven之setting.xml配置文件详解
查看>>
SDK目录结构
查看>>
malloc() & free()
查看>>
HDU 2063 过山车
查看>>
高精度1--加法
查看>>
String比较
查看>>
Django之Models
查看>>
CSS 透明度级别 及 背景透明
查看>>
Linux 的 date 日期的使用
查看>>
PHP zip压缩文件及解压
查看>>
SOAP web service用AFNetWorking实现请求
查看>>
Java变量类型,实例变量 与局部变量 静态变量
查看>>
mysql操作命令梳理(4)-中文乱码问题
查看>>
Python环境搭建(安装、验证与卸载)
查看>>
一个.NET通用JSON解析/构建类的实现(c#)
查看>>
Windows Phone开发(5):室内装修 转:http://blog.csdn.net/tcjiaan/article/details/7269014
查看>>