DIV+CSS右列宽度自适应布局的不同实现方法

如下图，对右列宽度自适应布局：



c

方法一：

采用左列left浮动，右列不浮动，采用margin-left定位。

<style type="text/css">
*{margin: 0;padding: 0;}
#left{
width:200px;
float: left;
height:100px;
background-color: yellow;
}
#right{
margin-left: 210px;
height:100px;
background-color: orange;
}
</style>

方法二：

采用左列向左浮动，右列绝对定位left。

<style type="text/css">
*{margin: 0;padding: 0;}
#left{
width:200px;
float: left;
height:100px;
background-color: yellow;
}
#right{
position:absolute;
left: 210px;
right:0;
height:100px;
background-color: orange;
}
</style>

html部分：

<div id="left"></div>
<div id="right"></div>

附赠阿里巴巴一道笔试题：

实现如下页面布局。核心区域左侧自适应，右侧固定宽度 200px。



CSS部分：

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;}

html部分：

<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>