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

资料来源：网络整理时间：2023/3/4 1:04:26 共计：3613 浏览

来分享一个关于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>

浏览器效果:

那么如何让两个相邻的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>

运行效果:

方式二:使用 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>

运行效果:

注意:

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

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

方式二中两个div中会有大小为8px的 margin ,这是从哪里来的呢?是从body继承过来的.

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：DIV盒子中的float和margin的最详细分析_CSS学习 | ·下一条：break和continue的区别举例说明_js/jQuery