养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

css浮动布局3个div怎么在同一行

时间:2024-10-23 16:17:47

css浮咿蛙匆盗动布局3个div怎么在同一行,默认的div是块级元素,因为每次创建都会占用一行,因此困扰了许多开发者,不过CSS提供了多种功能来解决这个问题,这里要重点介绍的是float方法。

css浮动布局3个div怎么在同一行

工具/原料

windows7

chrome浏览器

sublimetext3

方法/步骤

1、打开编辑器,新建一个HTML文档,并且设立一下基本的架构。

css浮动布局3个div怎么在同一行

2、创建一个新的CSS文件,并且关联HTML文件。

css浮动布局3个div怎么在同一行

3、创建三个div,我们可以看到默认三个div会各自占一行。

css浮动布局3个div怎么在同一行

4、float:left;我们给三个div都加上这个属性,那么就会位于同一行了。

css浮动布局3个div怎么在同一行

css浮动布局3个div怎么在同一行

5、float:right;如果是这样就会浮动到右边。

css浮动布局3个div怎么在同一行

css浮动布局3个div怎么在同一行

6、如果只设置一个浮动,那么其它div会覆盖位置,导致看不到。

css浮动布局3个div怎么在同一行

css浮动布局3个div怎么在同一行

© 一点知识