实现两边定宽，中间自适应布局（三栏布局）的七种方法
2024-04-25 02:37:25
浮动法
<style type="text/css">html,body{height: 100%;margin: 0;} div{height: 100%;}.left{ background-color: red;float: left;width: 300px; } .right{ background-color: yellow; float: right; width: 300px; } .center{ background-color: green; margin-left: 300px;margin-right: 300px;} </style> <body> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div>
</body>
定位法
<style type="text/css">html,body{height: 100%;margin: 0;} div{height: 100%;}.parent{ position: relative; }.left{ background-color: red; width: 300px; position: absolute; left: 0; } .right{ background-color: yellow; width: 300px; position: absolute; right: 0;} .center{ background-color: green; margin-left: 300px;margin-right: 300px;}</style> <body> <div class="parent"> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div></div>
</body>
弹性盒子法
<style type="text/css">html,body{height: 100%;margin: 0;} div{height: 100%;}.parent{ display: flex; } .left{ width: 300px; background-color: red; } .right{ width: 300px; background-color: yellow; } .center{ flex-grow:1; background-color: green; } </style> <body> <div class="parent"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div>
</body>
网格布局
<style type="text/css">html,body{height: 100%;margin: 0;} div{height: 100%;}.parent{ display: grid;grid-template-columns: 300px auto 300px;}.left{ background-color: red; } .right{ background-color: yellow; } .center{ background-color: green; }</style> <body> <div class="parent"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div>
</body>
表格布局
<style>body,html{height: 100%;margin: 0;}div{height: 100%;}.parent{width: 100%;display: table;}.right{width: 300px;background-color: red;display: table-cell;}.left{width: 300px;background-color: blue;display: table-cell;}.center{background-color: yellow;display: table-cell;}</style><body> <div class="parent"><div class="left">left</div><div class="center">center</div><div class="right">right</div></div>
</body>
双飞翼
<style>html,body{height: 100%;margin: 0;}div{height: 100%;}.center{width: 100%;float: left;}.main{background-color: blueviolet;margin-left: 300px;margin-right: 300px;}.left{background-color: cornflowerblue;width: 300px;float: left;margin-left: -100%;}.right{background-color: #ff0097;width: 300px;float: left;margin-left: -300px;}</style><body><div class="center"><div class="main">center</div></div><div class="left">left</div><div class="right">right</div>
</body>
圣杯
<style>body,html{height: 100%;margin: 0;}div{height: 100%;}.parent{padding-left: 300px;padding-right: 300px;}.right{background-color: red;width: 300px;float: left;margin-left: -300px;position: relative;right: -300px;}.left{background-color: blue;width: 300px;float: left;margin-left: -100%;position: relative;left: -300px;}.center{background-color: yellow;width: 100%;float: left;}</style><body> <div class="parent"><div class="center">center</div><div class="left">left</div><div class="right">right</div></div>
</body>
实现两边定宽，中间自适应布局（三栏布局）的七种方法相关推荐
- 通过宽高自适应设计两栏布局和三栏布局
1.两栏布局 我们要实现下面这样一个东西:两栏,左边一栏,右边一栏,左边宽高固定,右边宽高自适应,见下图: ✍我们有两种解决办法:(1)给右边盒子加外边距(2)calc函数的运用 第一种方法:(1)给 ...
- CSS 经典布局（两栏布局 + 三栏布局 + 圣杯布局 + 双飞翼布局）
两栏布局(左列定宽, 右列自适应) DOM结构 <div class="box"><div class="box-left"></ ...
- html5+css3网页制作:三栏布局宽度自适应,css三栏布局的五种写法，中间自适应，左右宽度固定...
假设高度已知,请写出三栏布局,其中左右各位300px,中间自适应 1.左右浮动 .left { float: left; width: 300px; background: red; } .right ...
- 基础//页面布局——三栏布局1
文章目录 一.题目 二.我的代码详情 三.总结 一.题目 根据题目给出你的答案. 二.我的代码详情 https://codepen.io/janmie-cjm/pen/gOrvBEw?editors= ...
- css实现三栏布局的几种方法及优缺点
三栏布局,顾名思义就是两边固定,中间自适应. 三栏布局在实际的开发十分常见,比如淘宝网的首页,就是个典型的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应. 我们不妨假定这 ...
- 实现三栏布局的几种方法
前言 三栏布局,顾名思义就是两边固定,中间自适应.三栏布局在实际的开发十分常见,比如淘宝网的首页,就是个典型的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应. 我们不妨假 ...
- css布局：table布局、两栏布局、三栏布局
一.最初的布局--table 最初的时候,网页简单到可能只有文字和链接.这时候,大家最常用的就是table.因为table可以展示出多个块的排布.这种布局现在应该不常用了,因为在形色单一时,使用起来方 ...
- 前端两栏布局和三栏布局
两栏布局 左边盒子定宽度右边盒子自适应 [浮动➕ marin实现] <div class="twoContain"><div class="twoCon ...
- css的经典三栏布局如何实现,css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 左边 中间 右边 body { padding: ; margin: ; } /* 绝对定位 */ .left, .right { po ...
- 三栏布局的七种实现方式
目录 1.float 2.position 3.⭐ flex 布局 4.table 布局(很少用) 5.grid 布局(存在兼容性问题) 6.⭐ 圣杯布局 7.⭐ 双飞翼布局 三栏布局一般指的是页面一 ...
最新文章
- python 画pr曲线
- System.Data.SqlClient.SqlException:“对象名 'customer' 无效。
- 微软出品 Kubernetes 最新学习指南 v3.0
- ?????nested exception is org.apache.ibatis.reflection.ReflectionException: There is no getter for pr
- python类的成员函数_注入一个python类成员函数
- 扩展源_瑞萨电子推出具备反向充电WattShare TRx模式的 15W无线充电电源P9415R接收器，扩展无线电源产品线...
- 鸿蒙系统定位低端市场,明年年初见！鸿蒙系统会先定位中低端，后续全面升级...
- mysql 按类型查询个数和总数
- html的字号txt的制作,font 文本颜色 字体 大小标签
- 无码间干扰，升余弦滤波器，非线性失真
- java实现Dijkstra算法
- 正则验证邮箱格式是不是正确
- 科技牛人：“别人家的孩子”牛在哪里！
- Reinforcement--Revit钢筋创建
- 沪漂程序员的两年，终说再见，你会不会是下一个离开的人？
- rua出300道四则运算题
- 贾其萃 : 笃行实践 筑梦扬帆 | 提升之路系列（二）
- 前端 彩票开奖走势图的实现
- JAVA-XMLJSON
- 分享自己使用python+pyserial+pyQT5写的串口调试助手