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

HTML和CSS经典布局6

2013-11-12 17:28 495 查看

如下图：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#content {
overflow: hidden;
}
.column-left {
float: left;
width: 200px;
min-height: 500px;
}
.column-right {
margin-left: 220px;
min-height: 500px;
}
.columns3 {
overflow: hidden;
}
.columns3 > div {
width: 33.33333%;
float: left;
}
.columns3 .column-content {
margin-right: 20px;
min-height: 300px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="header" style="height: 50px; background: blue;">

</div>
<div id="content">
<div class="column-left" style="background-color: yellow;">

</div>
<div class="column-right">
<div class="columns3">
<div>
<div class="column-content"></div>
</div>
<div>
<div class="column-content"></div>
</div>
<div>
<div class="column-content"></div>
</div>
</div>
</div>
</div>
</body>
</html>

View Code

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

标签：

相关文章推荐

新的分享

章节导航