如何在html中怎么让图片浮动?

如何在html中怎么让图片浮动?,第1张

1、使用css中的flaot属性就可以了,首先打开Dreamweaver,创建html文件:

2、然后先给页面设置背景颜色,创建段落两个段落,段落上面设置2张图片的float属性,分别让它们左右浮动,值为left和right,最后打开浏览器:

3、打开浏览器后即可看到效果,两张图片分别浮动在文本的左右两边,文字则是围绕在图片周围.。以上就是在html中让图片浮动的方法:

新建一个html网页,在body中插入【<div class="content"></div>】并引入CSS【.content{width: 420pxheight: 100pxbackground: #d4d4d4padding: 5px 0 5px 5px}】。

请点击输入图片描述

在大DIV中插入一个DIV【<div class="a"></div>】并引入CSS【.a{width: 100pxheight: 100pxmargin-right: 5pxbackground: #ff0000}】定义它的高,宽,外边距,背景色。

请点击输入图片描述

继续添加一个同级的DIV【<div class="a b"></div>】并引入样式a和样式b,样式B只定义背景色【.b{background: #FF5F00}】。可以看到第2个DIV排到了第一个的下方位置。

请点击输入图片描述

按照同样的方法再添加2个同级的DIV并引入不同颜色的DIV【<div class="a c"></div><div class="a d"></div>】。然后引入CSS【.c{background: #FFED00}.d{background: #00FF93}】。刷新后可以看到预览效果是4个IDV垂直排列的,怎么能让他们水平排列在一行呢?

请点击输入图片描述

为了方便朋友们查看顺序,把4个DIV分别插入一个数字,相当于给他们编一个号码。

请点击输入图片描述

接下来就要用到浮动代码了。在4个DIV共用的a样式中,加入左浮动【float: left】。保存并刷新网页可以看到已经都在一行上了,而且是按照编码顺序从左到右排列的。

请点击输入图片描述

我们再来试一下右浮动【float:right】,可以看到DIV是从右向左排列的。现在朋友们知道怎么使用浮动代码了吗?

请点击输入图片描述

HTML清除浮动的方法步骤如下:

1、首先,制作一个简单的HTML页面,找到父级元素,将父级元素添加上边框;

2、然后,将父级元素添加上边框后,发现父级元素没有被子元素的高度所撑开,保持标签的高度;

3、在HTML页面上,将最后一个浮动元素的后面添加上div,设置其类型为clearboth;

4、设置完成后,将浮动元素的父级元素添加上伪类,添加成功后,HTML即可清除浮动。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6261491.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存