css自适应布局（两列自适应布局+三列左右固定中间自适应+三列中间固定左右自适应）
1.两列自适应css
<!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>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>htm
</body>
</html>blog
3.三列中间自适应，左右固定it
<!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>io
每种自适应写了一种方案，欢迎补充！class
------------------------------------------------------------------------------meta
汗！不容许150个字内发布，那我就再写一种关于三列左右固定，中间自适应布局float
<!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>
- 1. css三栏布局：左右固定宽中间自适应
- 2. 三栏布局-左右宽固定,中间自适应
- 3. 三栏布局（一）-------左右宽高固定，中间自适应
- 4. css布局，左右固定中间自适应实现
- 5. 使用CSS实现三列布局（左右固定宽度，中间自适应）
- 6. 三列布局-中间固定俩边自适应-和两边固定中间自适应布局
- 7. 左右固定，中间自适应布局
- 8. flex左右布局 左边固定 右侧自适应
- 9. css 关于两栏布局，左边固定，右边自适应
- 10. CSS实现三栏布局，左右宽度固定，中间宽度自适应
- 更多相关文章...
- • 自定义TypeHandler - MyBatis教程
- • Maven Web 应用 - Maven教程
- • RxJava操作符（十）自定义操作符
- • SpringBoot中properties文件不能自动提示解决方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。