css3盒布局取代float布局
来源:互联网 发布:网络系统安全分类 编辑:程序博客网 时间:2024/05/10 09:56
下面来写一个布局,上面分三列,底部还有两个一列。
1. 用float浮动来写
注意,上面三个div都固定了宽度且向左浮动,红色div使用clear:both属性
问题来了:就是上面三个浮动的div,高度都没定义,所以它们的高度明显不一致。。
代码:
<span style="font-size:18px;"><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Float属性布局</title> <style> body{ color:#fff; } div#centerbody{ width:1000px; margin:auto; } div#left{ float:left; width:300px; background-color: green; } div#center{ float:left; width: 400px; padding: 10px; background-color: pink; } div#right{ float:left; width: 300px; background-color: lightblue; } div#left,div#center,div#right{ box-sizing: border-box; /*指定元素的宽度width和高度height的计算方法,border-box表示包含到border;content-box表示仅包含content是默认*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .footer{ background-color: red; width: 1200px; height: 30px; margin:auto; clear:both; } .more{ background-color: blue; height: 60px; } </style></head><body><div id="centerbody"> <div id="left"> <h2>栏目列表</h2> <ul> <li><a href="index.html">栏目名称</a></li> <li><a href="index.html">栏目名称</a></li> <li><a href="index.html">栏目名称</a></li> <li><a href="index.html">栏目名称</a></li> </ul> </div> <div id="center"> 始终坚持人民利益至上,是由社会主义初级阶段的主要矛盾决定的。我国社会主义制度建立后,社会的主要矛盾是人民日益增长的物质文化需要同落后的社会生产之间的矛盾。这就要求进一步解放和发展生产力,不断满足人民群众日益增长的物质文化需要。党的十八大以来,我们党坚持人民利益至上,深入把握社会主义初级阶段基本国情、社会主要矛盾、世界上最大发展中国家的国际地位“三个没有变”,坚持以经济建设为中心不动摇,坚持改革开放不动摇,进一步解放和发展生产力,不断满足人民群众物质文化需要,以更好更全面地实现人民幸福。 </div> <div id="right"> <h2>推荐文章</h2> <ul> <li><a href="index.html">推荐文章</a></li> <li><a href="index.html">推荐文章</a></li> <li><a href="index.html">推荐文章</a></li> <li><a href="index.html">推荐文章</a></li> <li><a href="index.html">推荐文章</a></li> <li><a href="index.html">推荐文章</a></li> <li><a href="index.html">推荐文章</a></li> <li><a href="index.html">推荐文章</a></li> </ul> </div></div><div class="footer"> 哈哈哈 该div使用 clear:both</div><div class="more"> 还没完呢。</div></body></html></span>
2. 把上面例子中的三个最上面浮动的div,定义同样的高度:height:226px,得到如下效果:
高度一样了,比刚才好多了,但是假设三栏中最高的栏的高度未知就不好办了。。
3.使用css3的盒布局,让三个浮动div的父元素来个display:-moz-box;display:-webkit-box;display:box;属性
不再用float和clear,也不必关注三个并列div的最大高度。可惜目前IE还不支持哈,但是效果真心不错
代码:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Float属性布局</title> <style> body{ color:#fff; } div#centerbody{ width:1000px; margin:auto; /*三个并列div的父div使用display属性指定盒布局*/ display:-moz-box; display: -webkit-box; display:box; } div#left{ width:300px; background-color: green; } div#center{ width: 400px; padding: 10px; background-color: pink; } div#right{ width: 300px; background-color: lightblue; } div#left,div#center,div#right{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .footer{ background-color: red; width: 1200px; height: 30px; margin:auto; } .more{ background-color: blue; height: 60px; } </style></head><body><div id="centerbody"> <div id="left"> <h2>栏目列表</h2> <ul> <li><a href="index.html">栏目名称</a></li> <li><a href="index.html">栏目名称</a></li> <li><a href="index.html">栏目名称</a></li> <li><a href="index.html">栏目名称</a></li> </ul> </div> <div id="center"> 始终坚持人民利益至上,是由社会主义初级阶段的主要矛盾决定的。我国社会主义制度建立后,社会的主要矛盾是人民日益增长的物质文化需要同落后的社会生产之间的矛盾。这就要求进一步解放和发展生产力,不断满足人民群众日益增长的物质文化需要。党的十八大以来,我们党坚持人民利益至上,深入把握社会主义初级阶段基本国情、社会主要矛盾、世界上最大发展中国家的国际地位“三个没有变”,坚持以经济建设为中心不动摇,坚持改革开放不动摇,进一步解放和发展生产力,不断满足人民群众物质文化需要,以更好更全面地实现人民幸福。 </div> <div id="right"> <h2>推荐文章</h2> <ul> <li><a href="index.html">推荐文章</a></li> <li><a href="index.html">推荐文章</a></li> <li><a href="index.html">推荐文章</a></li> <li><a href="index.html">推荐文章</a></li> <li><a href="index.html">推荐文章</a></li> <li><a href="index.html">推荐文章</a></li> <li><a href="index.html">推荐文章</a></li> <li><a href="index.html">推荐文章</a></li> </ul> </div></div><div class="footer"> 哈哈哈</div><div class="more"> 还没完呢。</div></body></html>
0 0
- css3盒布局取代float布局
- Float布局
- css3弹性盒布局
- CSS3 弹性盒布局
- css3盒布局
- HTML5+CSS3盒布局
- CSS3 弹性盒布局
- CSS3中的盒布局
- CSS3弹性盒布局
- CSS3 盒布局
- css3 布局
- CSS3:布局
- css3布局
- CSS3 布局
- css3布局
- css3布局
- css3伸缩布局盒模型
- CSS3 flex弹性盒布局
- 【HDU4081】【次最小生成树变形】【要保持一直的风格】【注意读入数据啊】
- HDU 5422-Rikka with Graph(规律题)
- python 抓取当当网的图书数据
- web.xml Servlet Configuration
- jsp中page指令常用属性
- css3盒布局取代float布局
- LINUX安装源码软件经典三部曲
- 微软笔试题 HihoCoder#1137: Recruitment 题解
- IOS 开发 点击屏幕非UITextField处 也收回键盘
- 与ASP.NET的完结
- 白话空间统计十五:多距离空间聚类分析 (Ripley's K 函数) (上)
- Java初学者都必须理解的六大问题
- PhoneGap 简介
- 模糊kmeans聚类