css自適應佈局（兩列自適應佈局+三列左右固定中間自適應+三列中間固定左右自適應）

時間  2019-11-19
標籤 css 自適應 佈局 左右 固定 中間 列中 欄目 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>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程