CSS之常见三栏布局
一：Flex三栏布局html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {display: flex; }
.main {flex-grow: 1; height: 250px;background-color:gold;}
.left {order:-1; flex: 0 1 200px; margin-right: 25px; height: 250px;background-color:red;}
.right{ flex: 0 1 100px;margin-left: 25px;height:250px;background-color: purple;}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
效果以下
二：BFC三栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.left { float: left;height: 200px;width: 100px; margin-right: 20px; background-color: red; }
.right { width: 200px; height: 200px; float: right;margin-left: 20px; background-color: blue; }
.main { height: 200px; overflow: hidden; background-color: green; }
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
效果以下图；
三：绝对定位三栏布局spring
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container { position: relative; }
.main {height: 300px; margin: 0 100px; background-color:purple; }
.left {position: absolute； width: 100px; height: 300px; left: 0; top: 0; background-color:springgreen; }
.right { position: absolute; width: 100px;height: 300px;background-color: blue;right: 0; top: 0; }
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
效果以下图
四：双飞翼三栏布局浏览器
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.content { float: left;width: 100%;}
.main { height: 200px; margin-left: 110px; margin-right: 220px; background-color: green;}
.left { float: left; height: 200px; width: 100px;margin-left: -100%; background-color: red; }
.right {width: 200px;height: 200px; float: right； margin-left: -200px; background-color: blue;}
</style>
</head>
<body>
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
双飞翼布局是将一个网页分为左列，中列和右列三部分效果是：左列和右列宽度恒定，中间列的宽度根据浏览器窗口的大小自适应。布局
优势：（1）兼容性好，兼容如有主流浏览器 flex
（2）能够实现内容的优先加载htm
实际布局中还有其余许多三栏布局形式。CSS世界浩瀚无穷！blog
相关文章
- 1. css常见双栏和三栏布局
- 2. CSS常见三栏布局方法
- 3. CSS之三栏布局
- 4. CSS布局——三栏布局
- 5. CSS布局之三栏布局
- 6. CSS三栏布局
- 7. CSS 三栏布局
- 8. 常见CSS两栏式布局
- 9. css常见布局
- 10. CSS常见布局
- 更多相关文章...
- • ASP.NET Web Pages - 页面布局 - ASP.NET 教程
- • ASP.NET MVC - 样式和布局 - ASP.NET 教程
- • 常用的分布式事务解决方案
- • JDK13 GA发布：5大特性解读
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. css常见双栏和三栏布局
- 2. CSS常见三栏布局方法
- 3. CSS之三栏布局
- 4. CSS布局——三栏布局
- 5. CSS布局之三栏布局
- 6. CSS三栏布局
- 7. CSS 三栏布局
- 8. 常见CSS两栏式布局
- 9. css常见布局
- 10. CSS常见布局