使用float和inline-block可以让两个div处于一行存在

老白 4个月前 234浏览 0评论

来分享一个关于div布局的基础知识,今天写一个zblog模板的时候贸然遇到了一个div的float问题,通过百度寻找方法,大多都是此类最基础的,没有发现自己想要的。

我们知道 div是 块级 元素,是 独占一行 的.一般情况下,两个相邻的div是不会处于一行的

例如:

<!DOCTYPE html><html><head lang="en">
	<meta charset="UTF-8">
	<title>让两个div处于同一行</title></head><body><div style="height: 40px;width: 80px;background-color: #006ba4" >
	div1</div><div style="height: 40px;width: 70px;background-color:chartreuse" >
	div2</div></body></html>

浏览器效果:

使用float和inline-block可以让两个div处于一行存在 CSS学习 第1张

 

那么如何让两个相邻的div在同一行呢?

有两种方式

方式一:使用float

<!DOCTYPE html><html><head lang="en">
	<meta charset="UTF-8">
	<title>让两个div处于同一行</title>
	<style>
		div{			float: left;
		}	</style></head><body><div style="height: 40px;width: 80px;background-color: #006ba4" >
	div1</div><div style="height: 40px;width: 70px;background-color:chartreuse" >
	div2</div></body></html>

运行效果:

使用float和inline-block可以让两个div处于一行存在 CSS学习 第2张

 

方式二:使用 inline-block

<!DOCTYPE html><html><head lang="en">
	<meta charset="UTF-8">
	<title>让两个div处于同一行</title>
	<style>
		div{			display: inline-block;
		}	</style></head><body><div style="height: 40px;width: 80px;background-color: #006ba4" >
	div1</div><div style="height: 40px;width: 70px;background-color:chartreuse" >
	div2</div></body></html>

运行效果:

使用float和inline-block可以让两个div处于一行存在 CSS学习 第3张

 

注意:

(1)为什么要使用 display : inline-block ;而不是 display : inline ; ,因为 display :  inline 导致元素的height和width样式失效.

(2)这两种方式的显示效果并不是完全一样的,为什呢?

方式二中两个div中会有大小为8px的 margin ,这是从哪里来的呢?是从body继承过来的. 
使用float和inline-block可以让两个div处于一行存在 CSS学习 第4张


 

发表评论