您的位置：首页 > Web前端 > CSS

CSS2与CSS3布局方式比较

2015-07-02 21:02 567 查看

1、先给出共同的HTML代码（只有引入的css样式表不同）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/css3.css"/>
</head>
<body>
<div id="container">
<div id="left-sidebar">
<h2>左侧边栏</h2>
<ul>
<li><a href="">超链接</a></li>
<li><a href="">超链接</a></li>
<li><a href="">超链接</a></li>
<li><a href="">超链接</a></li>
<li><a href="">超链接</a></li>
</ul>
</div>
<div id="contents">
<h2>内容</h2>
<img src="img/1.jpg"/>
<p>实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字
实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文
字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例
文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实
例文字实例文字实例文字</p>
</div>
<div id="right-sidebar">
<h2>右侧边栏</h2>
<ul>
<li><a href="">超链接</a></li>
<li><a href="">超链接</a></li>
<li><a href="">超链接</a></li>
</ul>
</div>
</div>
</body>
</html>

2、在CSS2中的布局代码及效果图

#left-sidebar{
float: left;
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{
float: left;
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
float: left;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar,#contents,#right-sidebar{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

效果图：

3、在CSS3中的布局代码及效果图

#container{             //这部分是新加的，主要是用到CSS3中的box属性
display: -moz-box;
display: -webkit-box;
}
#left-sidebar{            //删除了float
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{            <span style="font-family: Arial, Helvetica, sans-serif;">//删除了float</span>
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar{         <span style="font-family: Arial, Helvetica, sans-serif;">//删除了float</span>
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar,#contents,#right-sidebar{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

效果图

4、分析

只需要对包含div的容器使用display:box属性同时删除对应的div元素的float属性就可实现多栏对齐的效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CSS3布局

相关文章推荐

新的分享

章节导航