css表格布局的疑问

easour 2016-09-17 04:27:21
css表格布局时候可以像<table>那样使用类似cosplan或者rowsplan合并?
下面是要实现的布局

<!DOCTYPE html>
<html>
<head>
<title>纯布局练习</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="buju2.css">
</head>
<body>
<div id="all">
<div class="row">
<header>头部</header>
<div id="chongshu1"></div>
</div>
<div class="row">
<div id="side">左边</div>
<div id="main">主体</div>
</div>
<div class="row">
<footer>底部</footer>
<div id="chongshu2"></div>
</div>
</div>
</body>
</html>

body{
margin:0px;
}
#all{
width:100%;
height:1000px;
display:table;
}
.row{
display:table-row;
}
header,#chongshu1{
display:table-cell;
background-color:pink;
width:50%;
height:10%;
}
#side{
display:table-cell;
width:30%;
height:80%;
background-color:green;
}
#main{
display:table-cell;
width:70%;
height:80%;
background-color:grey;
}
footer,#chongshu2{
display:table-cell;
width:50%;
height:10%;
background-color:yellow;
}
...全文
380 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

39,084

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧