关闭

CSS的浮动效果

3802人阅读 评论(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;
}

效果如图



13
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1211806次
    • 积分:14569
    • 等级:
    • 排名:第841名
    • 原创:256篇
    • 转载:3篇
    • 译文:2篇
    • 评论:277条
    博主介绍
    github 收集的一些不错的文章

    github
    博客专栏
    最新评论