实现如下页面布局。核心区域左侧自适应,右侧固定宽度 200px
<!DOCTYPE HTML >
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;
padding:0}
#content {width:800px;margin: 10px auto}
#header {border:solid 1px green;height:70px;position: relative}
#logo {margin:10px ;float:left;border:solid 1px red;height:50px;width: 50px;}
#userinfo { position:absolute;border:1px solid #191919;right:10px;bottom:10px;width:140px;text-align:right}
.main {margin-top:10px;margin-bottom:10px}
aside {height:100px;border:1px solid red;width:200px;float: right}
#content2 {height:300px;border:1px solid blue;margin-right:208px;}
footer {border:1px solid #191919;margin-bottom:0;}
</style>
</head>
<body>
<div id="content">
<div id="header">
<div id="logo">LOGO</div>
<div id="userinfo">用户名</div>
</div>
<div class="main">
<aside>aside 定宽200</aside>
<div id="content2">content自适应宽度</div>
</div>
<footer>
footer
</footer>
</div>
</body>
</html>
方法二(摘):
body {
margin: 0;
}
.fn-clear:after {
content: " ";
clear: both;
display: block;
font-size: 0;
visibility: hidden;
height: 0;
}
.fn-clear {
zoom: 1;
}
.container {
padding: 10px;
}
.header {
background: #eee;
position: relative;
margin-bottom: 10px;
}
.logo {
width: 100px;
height: 100px;
float: left;
background: #f60;
}
.username {
position: absolute;
right: 10px;
bottom: 10px;
}
.main {
margin-bottom: 10px;
}
.side-bar {
width: 200px;
float: right;
background: #ccc;
}
.content {
margin-right: 200px;
background: #f6f6f6;
}
.footer {
background: #999;
}
<div class="container">
<div class="header fn-clear">
<div class="logo">logo</div>
<div
class="username">zhoumingXXX@163.com</div>
</div>
<div class="main">
<div
class="side-bar">menu</div>
<div class="content">左侧内容</div>
</div>
<div class="footer">
footer
</div>
</div>
由于floar会导致父元素不能被撑开,所以用伪类(非IE);IEhack 用zoom
详见:clear