左边定宽, 右边自适应方案
方法一:
左边左浮动, 右边添加
margin-left
<style>
*{
margin: 0;
padding: 0;
}
.left{
background-color: #ccc;
float: left;
200px;
}
.right{
background-color: #aaa;
margin-left: 200px;
}
</style>
<body>
<div class="left">
<h4>Left</h4>
</div>
<div class="right">
<h4>Right</h4>
</div>
</body>
方法二:
左边左浮动, 右边添加
overflow: hidden
此方法在IE6不兼容
<style>
*{
margin: 0;
padding: 0;
}
.left{
background-color: #ccc;
float: left;
200px;
}
.right{
background-color: #aaa;
overflow: hidden;
}
</style>
<body>
<div class="left">
<h4>Left</h4>
</div>
<div class="right">
<h4>Right</h4>
</div>
</body>
方法三:
左边使用绝对定位, 右边添加
margin-left
<style>
*{
margin: 0;
padding: 0;
}
.left{
background-color: #ccc;
float: left;
200px;
position: fixed;
top: 0;
left: 0;
}
.right{
background-color: #aaa;
margin-left: 200px;
/* overflow: hidden; */
}
</style>
<body>
<div class="left">
<h4>Left</h4>
</div>
<div class="right">
<h4>Right</h4>
</div>
</body>
方法四:
左边使用绝对定位, 右边也使用绝对定位
<style>
*{
margin: 0;
padding: 0;
}
.left{
background-color: #ccc;
float: left;
200px;
position: fixed;
top: 0;
left: 0;
}
.right{
background-color: #aaa;
position: fixed;
top: 0;
left: 200px;
}
</style>
<body>
<div class="left">
<h4>Left</h4>
</div>
<div class="right">
<h4>Right</h4>
</div>
</body>
方法五:
使用嵌套div的方法, 没有想明白原因
- 左右浮动, 左边宽度给定. 右边宽度100%,
- 左边再给左边一个
margin-right: 100%的话, 右边就上去了, 并且可以把左边遮掉. - 这个时候, 再给右边里面盒子一个左边距, 把位置让开.
<style>
* {
margin: 0;
padding: 0;
}
.left {
background-color: #ccc;
float: left;
200px;
margin-right: -100%;
}
.right {
float: left;
100%;
}
.right_inner {
background-color: #aaa;
margin-left: 200px;
}
</style>
<body>
<div class="left">
<h4>Left</h4>
</div>
<div class="right">
<div class="right_inner">
<h4>Right</h4>
</div>
</div>
</body>
方法六
左边设置浮动, 右边设置宽度100%
<style>
* {
margin: 0;
padding: 0;
}
.left {
background-color: #ccc;
float: left;
200px;
}
.right {
100%;
background-color: #aaa;
}
</style>
<div class="left">
<h4>Left</h4>
</div>
<div class="right">
<h4>Right</h4>
</div>