作者:xinyaolin_857 | 来源:互联网 | 2020-08-26 14:52
使用CSS中的float属性可以将应用的元素从原本的位置移动到左上或向右移动。不适用于float的内部元素,如文本等会被设置在float元素的周围。
在宽度为170px,高度为100px的盒子中设置图像和文字,在图像上设置float属性为left时的例子。
代码如下:
HTML代码
在图像上使用float:left的例子:文字在右侧显示,剩下部分的文字在图像的下面被显示
CSS代码
p.content1 {background-color: #b0e0e6; width: 170px; height: 100px; }
img {float: left;}
在浏览器上显示如下效果
图像在左侧显示,文字环绕在图像右侧和下侧。
代码如下
HTML代码
在图像上使用float:right的例子:文字在左侧显示,剩下部分的文字在图像的下面被显示
CSS代码
p.content1 {background-color: #b0e0e6; width: 170px; height: 100px; }
img {float: right;}
在浏览器上显示如下效果
图像在右侧显示,文字围绕在图像左侧和下侧。
以上就是本篇文章的全部内容了,更多相关的精彩内容大家可以移步到 第一PHP社区 的CSS视频教程栏目进一步学习!!!
以上就是CSS中float属性怎么使用的详细内容,更多请关注 第一PHP社区 其它相关文章!