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=
热门推荐
- python时间类的实现(Python日期时间Time模块实例详解)
- docker查看管理配置信息(Docker Secret的管理和使用详解)
- laravel语法有哪些(对laravel in 查询的使用方法详解)
- css透明输入框(纯CSS实现气泡对话框尖角处理方案)
- 云服务器的安全问题(云服务器如何提高安全组性能?)
- sqlserver2012登录出现报错18456(SQL Server 2012 sa用户登录错误18456的解决方法)
- 用python制作一个简单的小程序(Python简单基础小程序的实例代码)
- SQL中的with as的使用
- sql server新建用户无法登录(sqlserver 因为选定的用户拥有对象,所以无法除去该用户的解决方法)
- 用python画圣诞树送给女朋友(情人节快乐! python绘制漂亮玫瑰花)