首页 > 其他 > 详细

float学习

时间:2014-08-24 01:40:01      阅读:338      评论:0      收藏:0      [点我收藏+]

2014年8月24日01:11:15

又不好意思的晚睡了

放代码吧

floatTest.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="common.css" />
</head>
    <body>
    <div class="floatTest"> 
    <div class="floatTestLeft">布局靠左浮动</div> 
    <div class="floatTestMiddleHigher">布局靠左浮动</div> 
    <div class="floatTestRight"><p>这个在这一层里面不是最高的</p></div>
    <div class="floatTestClear"></div><!-- html注释:清除float产生浮动 -->
    <div class="lastBlock"><p>清除浮动布局之后,比照上一层最高的</p></div>
    </div> 
    </body>
</html>

common.css中的相关代码

/*下面的是floatTest.html的样式表 */
.floatTest{ width:800px;padding:10px;border:1px solid #F00} 
.floatTestLeft{ float:left;width:150px;border:1px solid #00F;height:50px} 
.floatTestMiddleHigher{ float:left;width:150px;border:1px solid #BA0;height:80px}
.floatTestRight{float:left;width:150px;border:1px solid black;height:70px} 
.floatTestclear{clear:both}
.lastBlock{width:150px;border:1px solid #00F;height:50px}

效果图

bubuko.com,布布扣

 

好饿啊。。。。

float学习

原文:http://www.cnblogs.com/lswit/p/3932174.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!