css自适应布局（两列自适应布局+三列左右固定中间自适应+三列中间固定左右自适应）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css自适应布局（两列自适应布局+三列左右固定中间自适应+三列中间固定左右自适应）相关的知识，希望对你有一定的参考价值。
1.两列自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css" media="screen">
#left{float: left;background: #ccc;height: 400px;width: 400px;}
#right{background: green;height: 400px;position: absolute;left: 400px;right: 0;}
</style>
</head>
<body>
<div id="left"></div>
<div id="right">11111<br>11111<br>11111<br>11111<br>11111<br></div>
</body>
</html>
2.三列中间固定左右自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#left{height: 300px;background: orange;float: left;width: 50%;position: relative;margin-left: -150px;}
#right{height: 300px;background: orange;float: right;width: 50%;margin-left: -150px;}
#center{width: 300px;height: 300px;background: green;float: left;position: relative;}
</style>
</head>
<body>
<div id="left">
</div>
<div id="center">
</div>
<div id="right">
</div>
</body>
</html>
3.三列中间自适应，左右固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#left{width: 300px;height: 300px;float: left;background: green;}
#right{height: 300px;background: green;width: 300px;float: right;}
#center{height: 300px;margin: 0 300px;background: #ccc;}
</style>
</head>
<body>
<div id="left">
</div>
<div id="right">
</div>
<div id="center">
</div>
</body>
</html>
每种自适应写了一种方案，欢迎补充！
------------------------------------------------------------------------------
汗！不允许150个字内发布，那我就再写一种关于三列左右固定，中间自适应布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#left{width: 300px;height: 300px;position: absolute;left: 0;background: green;}
#right{height: 300px;background: green;width: 300px;position: absolute;right: 0;}
#center{height: 300px;margin: 0 300px;background: #ccc;}
</style>
</head>
<body>
<div id="left">
</div>
<div id="right">
</div>
<div id="center">
</div>
</body>
</html>
以上是关于css自适应布局（两列自适应布局+三列左右固定中间自适应+三列中间固定左右自适应）的主要内容，如果未能解决你的问题，请参考以下文章