两栏布局和三栏布局的方式常见的
两栏布局的方式左边定宽,右边自适应
实现方式
1 margin-left float
2 display: flex; flex: 1;
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>/* 第一个 */.left {width: 200px;height: 200px;background-color: red;float: left;}.right {height: 200px;margin-left: 200px;background-color: rgb(21, 204, 113);}.box {overflow: hidden;}/* 第二个 */.boxs {width: 100%;height: 200px;display: flex;}.lefts {width: 200px;height: 100%;background-color: rgb(31, 190, 39);}.rights {flex: 1;background-color: aqua;}
</style><body><!-- 第一个 --><div class="box"><div class="left"></div><div class="right"></div></div><!-- 第二个 --><div class="boxs"><div class="lefts"></div><div class="rights"></div></div>
</body></html>
三栏布局、(圣杯布局、双飞翼布局) 中间自适应两边固定
实现方式
1 position
2 float + margin
3 display: grid; grid-template-columns: 300px auto 300px;
还有好多 flex ....
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>/* 第一种 */.box {position: relative;height: 100%;width: 100%;}.a,.b,.c {height: 200px;line-height: 200px;text-align: center;}.a {position: absolute;right: 0;top: 0;width: 100px;background-color: red;}.b {position: absolute;left: 0;top: 0;width: 100px;background-color: pink;}.c {margin: 0 100px;background-color: rgb(19, 44, 171);}/* 第二种 */.boxs {width: 100%;height: 100%;}.as,.bs,.cs {height: 200px;line-height: 200px;}.as {float: right;width: 200px;background-color: blue;}.bs {float: left;width: 200px;background-color: pink;}.cs {margin: 0 200px 0 200px;background-color: orange;}/* 第三种 */.boxa {width: 100%;height: 100%;display: grid;/* 重点 */grid-template-columns: 300px auto 300px;}.left,.right,.center {height: 200px;}.left {background-color: pink;}.right {background-color: rgb(198, 44, 44);}.center {background-color: rgb(47, 218, 187);}
</style><body><!-- 第一种 --><div class="box"><div class="a"></div><div class="b"></div><div class="c"></div></div><!-- 第二种 --><div class="boxs"><div class="as"></div><div class="bs"></div><div class="cs"></div></div><!-- 第三种 --><div class="boxa"><div class="left"></div><div class="right"></div><div class="center"></div></div>
</body></html>
两栏布局和三栏布局的方式常见的相关推荐
- HCJ2:页面两栏式或三栏式布局
2.1 简介 大家在进行页面布局的时候,可能会遇见两栏式布局与三栏式布局,如下图所示: 两栏式 例子: 三栏式 2.2 方法 2.2.1 两栏式 .left-pane{width: 14%;heigh ...
- 前端两栏布局和三栏布局
两栏布局 左边盒子定宽度右边盒子自适应 [浮动➕ marin实现] <div class="twoContain"><div class="twoCon ...
- 常用布局简介(单列布局、两列布局、三列布局、sticky footer粘连布局)
常用布局简介 一.简介 网页布局对于一个前端开发者而言至关重要,掌握好布局知识有助于我们更好的实现CSS界面的设计和开发.布局是有限空间内的元素排列方式,因为页面设计横向不滚动,纵向无限延伸,所以大多 ...
- 两栏布局,三栏布局,等高布局,流式布局
读前笑一笑: 我前面一女生平胸,然后我问她哪天你晚上自己回家,被劫色怎么办-? 她淡淡的回了句:"我就脱了上衣,然后说,别激动,是自己人"--自己人--己人-人- 两栏布局: 1. ...
- 通过宽高自适应设计两栏布局和三栏布局
1.两栏布局 我们要实现下面这样一个东西:两栏,左边一栏,右边一栏,左边宽高固定,右边宽高自适应,见下图: ✍我们有两种解决办法:(1)给右边盒子加外边距(2)calc函数的运用 第一种方法:(1)给 ...
- css布局:table布局、两栏布局、三栏布局
一.最初的布局--table 最初的时候,网页简单到可能只有文字和链接.这时候,大家最常用的就是table.因为table可以展示出多个块的排布.这种布局现在应该不常用了,因为在形色单一时,使用起来方 ...
- 两栏布局与三栏布局(圣杯布局与双飞翼布局)
两栏布局 右侧绝对定位的写法 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
- CSS多栏布局-两栏布局和三栏布局
目录 前言 ------两栏布局 一.左列定宽,右列自适应 1.浮动+margin 2.浮动+BFC 3.定位 4.flex 5.浮动+负外边距 6.table布局 二.左列不定宽,右列自适应 1.f ...
- HTML两栏布局和三栏布局
两栏布局 需求:两列布局,左侧宽度固定,右侧宽度适应窗口变化 1.方法一 左侧右侧都浮动 2.方法二 右侧定位 3.方法三 左侧定位,右侧设置左外边距 4.方法四 左侧定位,右侧有一层容器,设置容器左 ...
最新文章
- 关于 HTML5 的 11 个让人难以接受的事实
- 为什么linux中c语言不一样,不懂linux为什么要死守c语言。
- 排序方法的分类 算法
- ERP开发中应用字符串解析实现界面翻译智能化
- 结构体怎么赋值_c语言学习之基础知识点介绍:结构体的介绍
- acer软件保护卡清除工具clear_如何清除 APT 缓存来回收宝贵的磁盘空间 | Linux 中国...
- LeetCode Longest Increasing Subsequence
- 目前最火的Java主流技术栈及开发工具
- 【原创】使用高德 API
- [论文解读] Concolic Testing for Deep Neural Networks
- 风险偏好情绪提振,欧元低位延续反弹
- python 模拟键盘输入组合键_Python 模拟键盘输入
- 《LeetCode刷题》954. 二倍数对数组(java篇)
- u-boot中nand相关命令使用---- ubi, ubifsls, ubifsmount, ubifsumount
- nodejs操作Excel表格
- MySQL 事务隔离级别,读现象,MVCC
- if [ $# -ne 1 ] 作用
- 如何从 Git 存储库中删除文件?
- 华为鸿蒙系统超级终端,华为再发新版鸿蒙OS系统!新增超级终端功能:可媲美iOS系统...
- 【威联通Nas】安装docker版本的Nextcloud