技术是我的毕生追求

Email: xianlubird@gmail.com

CSS的浮动效果

在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;
}

效果如图



阅读更多
个人分类: HTML
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭