CSS的浮动效果

原创 2012年03月24日 13:19:59

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

效果如图



相关文章推荐

css+js框浮动效果

  • 2017年06月11日 04:41
  • 106KB
  • 下载

HTML+CSS进阶学习摘录(表单效果+清除浮动+定位布局)(五)

一、表单效果 1、深入radio和checkbox  当文字大小为12px时,我们给单选框或复选框定义"vertical-align: -3px" 即可解决对齐问题。针对不同页面文字大小调整属性值大小...
  • zyw6042
  • zyw6042
  • 2017年07月08日 15:10
  • 236

基于jQuery精美浮动层效果(JS+CSS)

  • 2010年06月23日 14:57
  • 1.03MB
  • 下载

css+js框浮动位移效果

cssjs框浮动位移效果 要实现的效果 咯这个样儿就是要搞整起来的目标看下面看下面好像有点像是电影的宣传一样 _ 先来一个小框框 哈哈就是使用一个div包裹 然后加上其他元素 头图 标题和价格 最后...

浮动DIV效果

  • 2014年12月12日 16:45
  • 407KB
  • 下载

html固定浮动在底部div的实现效果

Document    body{  height:1500px;  }  .footer{  z-index:99999;  position:fixed;   bottom:0; left:0; ...

VB实现按钮浮动效果...

  • 2009年10月08日 01:56
  • 2KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS的浮动效果
举报原因:
原因补充:

(最多只允许输入30个字)