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

 时间:2024-10-23 14:29:04

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怎么在同一行

HTML网页怎么设置圆角边框 html图片如何居中 怎么让div居中 HTML怎样使图片居中 html轮播图怎么制作
热门搜索
日本美女动态图片 暴走恐怖漫画 草莓的图片 美国恶霸犬图片 超大胆人体艺术图片