css三栏布局详解(CSS三列布局的多种表现形式)
类别:Web前端 浏览量:1387
时间:2021-11-08 16:19:59 css三栏布局详解
CSS三列布局的多种表现形式一、两侧定宽中间自适应布局
思路一: float
【1】float + margin + calc
- <style>
- p{margin: 0;}
- .parent{overflow: hidden;}
- .left,.rightright{float: left;width: 100px;}
- .center{float: left; width:calc(100% - 240px);margin: 0 20px;}
- </style>
- <li class="parent" style="background-color: lightgrey;">
- <li class="left" style="background-color: lightblue;">
- <p>left</p>
- </li>
- <li class="center" style="background-color: pink;">
- <p>center</p>
- <p>center</p>
- </li>
- <li class="right" style="background-color: lightgreen;">
- <p>right</p>
- </li>
- </li>
【2】float + margin + (fix)
- <style>
- p{margin: 0;}
- .parent{overflow: hidden;}
- .left,.rightright{position: relative;float: left;width: 100px;}
- .centerWrap{float: left; width:100%; margin: 0 -100px;}
- .center{margin: 0 120px;}
- </style>
- <li class="parent" style="background-color: lightgrey;">
- <li class="left" style="background-color: lightblue;">
- <p>left</p>
- </li>
- <li class="centerWrap" style="background-color: red;">
- <li class="center" style="background-color: pink;">
- <p>center</p>
- <p>center</p>
- </li>
- </li>
- <li class="right" style="background-color: lightgreen;">
- <p>right</p>
- </li>
- </li>
思路二: inline-block
【1】inline-block + margin + calc
- <style>
- p{margin: 0;}
- .parent{font-size: 0;}
- .left,.rightright,.center{display:inline-block; vertical-align: top;font-size: 16px;}
- .left,.rightright{width: 100px;}
- .center{width: calc(100% - 240px); margin: 0 20px;}
- </style>
- <li class="parent" style="background-color: lightgrey;">
- <li class="left" style="background-color: lightblue;">
- <p>left</p>
- </li>
- <li class="center" style="background-color: pink;">
- <p>center</p>
- <p>center</p>
- </li>
- <li class="right" style="background-color: lightgreen;">
- <p>right</p>
- </li>
- </li>
【2】inline-block + margin + (fix)
- <style>
- p{margin: 0;}
- .parent{font-size: 0;}
- .left,.rightright,.centerWrap{display:inline-block; vertical-align: top;font-size: 16px;}
- .left,.rightright{width: 100px;position:relative;}
- .centerWrap{width: 100%; margin: 0 -100px;}
- .center{margin: 0 120px;}
- </style>
- <li class="parent" style="background-color: lightgrey;">
- <li class="left" style="background-color: lightblue;">
- <p>left</p>
- </li>
- <li class="centerWrap" style="background-color: orange;">
- <li class="center" style="background-color: pink;">
- <p>center</p>
- <p>center</p>
- </li>
- </li>
- <li class="right" style="background-color: lightgreen;">
- <p>right</p>
- </li>
- </li>
思路三: table
- <style>
- p{margin: 0;}
- .parent{display: table; width: 100%;table-layout: fixed;}
- .left,.rightright,.centerWrap{display:table-cell;}
- .left,.rightright{width: 100px;}
- .center{margin: 0 20px;}
- </style>
- <li class="parent" style="background-color: lightgrey;">
- <li class="left" style="background-color: lightblue;">
- <p>left</p>
- </li>
- <li class="centerWrap" style="background-color: orange;">
- <li class="center" style="background-color: pink;">
- <p>center</p>
- <p>center</p>
- </li>
- </li>
- <li class="right" style="background-color: lightgreen;">
- <p>right</p>
- </li>
- </li>
思路四: absolute
- <style>
- p{margin: 0;}
- .parent{position: relative;height:40px;}
- .left,.rightright,.center{position: absolute;}
- .left{left: 0;width:100px;}
- .rightright{rightright: 0;width: 100px;}
- .center{left: 120px; rightright: 120px;}
- </style>
- <li class="parent" style="background-color: lightgrey;">
- <li class="left" style="background-color: lightblue;">
- <p>left</p>
- </li>
- <li class="center" style="background-color: pink;">
- <p>center</p>
- <p>center</p>
- </li>
- <li class="right" style="background-color: lightgreen;">
- <p>right</p>
- </li>
- </li>
思路五: flex
- <style>
- p{margin: 0;}
- .parent{display: flex;}
- .left,.rightright{width: 100px;}
- .center{flex: 1; margin: 0 20px;}
- </style>
- <li class="parent" style="background-color: lightgrey;">
- <li class="left" style="background-color: lightblue;">
- <p>left</p>
- </li>
- <li class="center" style="background-color: pink;">
- <p>center</p>
- <p>center</p>
- </li>
- <li class="right" style="background-color: lightgreen;">
- <p>right</p>
- </li>
- </li>
二、两列定宽一侧自适应布局
这种布局与单列定宽单列自适应布局非常相似
思路一: float
【1】float + margin
缺点是IE6-浏览器的3px的bug,以及当自适应列中有元素清除浮动时,会使该元素不与左侧浮动元素同行,从而出现文字下沉现象
- <style>
- p{margin: 0;}
- .parent{overflow: hidden;}
- .left,.center{float: left;width: 100px;margin-right: 20px;}
- .rightright{margin-left: 240px;}
- </style>
- <li class="parent" style="background-color: lightgrey;">
- <li class="left" style="background-color: lightblue;">
- <p>left</p>
- </li>
- <li class="center" style="background-color: pink;">
- <p>center</p>
- </li>
- <li class="right" style="background-color: lightgreen;">
- <p>right</p>
- <p>right</p>
- </li>
- </li>
【2】float + margin + calc
- <style>
- p{margin: 0;}
- .parent{overflow: hidden;}
- .left,.center{float: left;width: 100px;margin-right: 20px;}
- .rightright{float: left; width: calc(100% - 240px);}
- </style>
- <li class="parent" style="background-color: lightgrey;">
- <li class="left" style="background-color: lightblue;">
- <p>left</p>
- </li>
- <li class="center" style="background-color: pink;">
- <p>center</p>
- </li>
- <li class="right" style="background-color: lightgreen;">
- <p>right</p>
- <p>right</p>
- </li>
- </li>
【3】float + margin + (fix)
- <style>
- p{margin: 0;}
- .parent{overflow: hidden;}
- .left,.center{position: relative; float: left;width: 100px;margin-right: 20px;}
- .rightWrap{float: left; width: 100%; margin-left: -240px;}
- .rightright{margin-left:240px;}
- </style>
- <li class="parent" style="background-color: lightgrey;">
- <li class="left" style="background-color: lightblue;">
- <p>left</p>
- </li>
- <li class="center" style="background-color: pink;">
- <p>center</p>
- </li>
- <li class="rightWrap">
- <li class="right" style="background-color: lightgreen;">
- <p>right</p>
- <p>right</p>
- </li>
- </li>
- </li>
【4】float + overflow
- <style>
- p{margin: 0;}
- .parent{overflow: hidden;}
- .left,.center{position: relative; float: left;width: 100px;margin-right: 20px;}
- .rightright{overflow: hidden;zoom:1;}
- </style>
- <li class=
您可能感兴趣
- css3伸缩布局及使用方法(利用CSS3的flexbox实现水平垂直居中与三列等高布局)
- html一行两列布局代码(CSS实现页面两列布局与三列布局的方法示例)
- css三栏布局详解(CSS三列布局的多种表现形式)
- 19号线二期全线电通 轨道交通项目最新进展来了(19号线二期全线电通)
- 涉及3条地铁线路 成都这4座轨道交通站点有新名字了(涉及3条地铁线路)
- 来了 成都轨道交通5条线路刷新 进度条(成都轨道交通5条线路刷新)
- 一部手机两套系统 OPPO Find X3的正确打开方式你知道吗(一部手机两套系统)
- OPPO用户看过来 汇总几个春节实用技巧,轻松搞定多设备联动玩法(汇总几个春节实用技巧)
- 北京旅游攻略(北京旅游攻略5日游及其花费)
热门推荐
- laravel5.2模型返回数组(解决Laravel5.5下的toArray问题)
- sqlifnull如何使用(在 SQL 语句中处理 NULL 值的方法)
- phptime函数与时区设置(php常用日期时间函数实例小结)
- laravel测试重连数据库(解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题)
- php运用redis实现抢购实例(PHP+redis实现微博的拉模型案例详解)
- UML对象图的介绍
- HTML5中新增的Input类型
- 怎么知道sqlyog连接的哪个mysql(SQLyog连接MySQL8.0报2058错误的完美解决方法)
- python的pickle用法(Python multiprocess pool模块报错pickling error问题解决方法分析)
- win7 ftp服务器怎么搭建(win7下利用IIS搭建FTP服务器)