CSS的浮动效果

最新推荐文章于 2022-08-19 11:55:10 发布

Bird

最新推荐文章于 2022-08-19 11:55:10 发布

阅读量4.5k

点赞数 3

分类专栏： HTML 文章标签： css div stylesheet class float html

本文链接：https://blog.csdn.net/a352193394/article/details/7389936

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在CSS中，浮动是非常重要的一个功能，主要是用来控制行元素或者块元素并列显示或者向左或者向右浮动。下面

来看一下效果。

先看一下Div的向右浮动效果

HTML代码如下

<!DOCTYPE html>
<html>
  <head>
    <title>css的浮动效果</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
  <link rel="stylesheet" href="../css/myFloat.css" type="text/css"></link>
  </head>
  
  <body>
  	<div class="div3">
    <div id="div2" class="div1">div1</div>
    <div id="div2" class="div1">div2</div>
    <div id="div2" class="div1">div3</div>
    </div>
  </body>
</html>

CSS代码如下

body{
	margin: 0px;
	padding: 0px;
}

.div1{
	background-color: pink;
	width: 150px;
	height: 100px;
	border: 1px solid blue;
	margin-top: 5px;
	margin-left: 5px;
}

#div2{
	float: left;/*右浮动是指让她尽量向右浮动，直到父元素的右边界*/
}

.div3{
	width: 800px;
	height: 400px;
	border: 1px solid blue;
}

效果如图

Bird

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS的浮动效果

在CSS中，浮动是非常重要的一个功能，主要是用来控制行元素或者块元素并列显示或者向左或者向右浮动。下面来看一下效果。先看一下Div的向右浮动效果HTML代码如下 css的浮动效果 div1 div2 div3 CSS代码如下body{ m
复制链接

扫一扫

专栏目录