类型一
1,左右两侧,左侧固定宽度200px,右侧自适应占满
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>左右两侧,左侧固定宽度200px,右侧自适应占满</title>
<style>
.box{
width:600px;
height:500px;
border:1px solid #ccc;
margin:0 auto;
}
.left{
width:200px;
height:500px;
background-color:red;
float:left;
}
.right{
height:500px;
background-color:#00f;
margin-left:200px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>左右两侧,左侧固定宽度200px,右侧自适应占满</title>
<style>
.box{
width:600px;
height:500px;
border:1px solid #ccc;
margin:0 auto;
}
.left{
width:200px;
height:500px;
background-color:red;
float:left;
}
.right{
height:500px;
background-color:#00f;
margin-left:200px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
运行结果
![图片描述 图片描述](https://i-blog.csdnimg.cn/blog_migrate/1715d48b04886380ec22c77de3d59daf.png)
类型二
2,左中右三列 左右固定200px 中间自适应占满
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>左中右三列 左右固定200px 中间自适应占满</title>
<style>
.box{
width:800px;
height:500px;
border:1px solid #ccc;
margin:0 auto;
}
.left{
width:200px;
height:500px;
background-color:red;
float:left;
}
.right{
width:200px;
height:500px;
background-color:#00f;
float:right;
}
.zhong{
height:500px;
margin:0 200px;
background-color:#f0f;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="zhong"></div>
</div>
</body>
</html>
运行结果
![图片描述 图片描述](https://i-blog.csdnimg.cn/blog_migrate/1a884a9b67a4c04c42342a220fcebd8e.png)
类型三
3,上中下三行 头部200px高 底部200px高 中间自适应占满
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>上中下三行 头部200px高 底部200px高 中间自适应占满</title>
<style>
.box{
width:600px;
height:400px;
border:1px solid #ccc;
margin:0 auto;
position:relative;
}
.top{
width:600px;
height:100px;
background-color:#ff0;
position:absolute;
top:0;
left:0;
}
.zhong{
width:100%;
background-color:#f0f;
position:absolute;
top:100px;
bottom:100px;
}
.bottom{
width:600px;
height:100px;
background-color:#f00;
position:absolute;
bottom:0;
left:0;
}
</style>
</head>
<body>
<div class="box">
<div class="top"></div>
<div class="bottom"></div>
<div class="zhong"></div>
</div>
</body>
</html>
运行结果
![图片描述 图片描述](https://i-blog.csdnimg.cn/blog_migrate/d2f19bb3f85170de66fe2daf476d3048.png)
总结
- 固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。
- 即
- 自适应宽度元素定义一个父标签,并设置float属性为left;width为100%;自适应宽度元素设置margin,margin-left应>=定宽元素宽度;
- 固定宽度元素设置margin-left属性为负值:-100%;
- 除此之外应注意HTML结构中应先写自适应元素,再写固定宽度元素。