前端两栏布局和三栏布局
两栏布局
左边盒子定宽度右边盒子自适应
【浮动➕ marin实现】
<div class="twoContain"><div class="twoContainSonLeft">twoContainSonLeft</div><div class="twoContainSonRight">twoContainSonRight</div></div>.twoContain {height: 300px;}/* 左边盒子定宽右边自适应*/.twoContain .twoContainSonLeft {width: 300px;background-color: yellowgreen;float: left;height: 100%;}.twoContain .twoContainSonRight {margin-left: 300px;background-color: blue;}
用flex布局也可以实现两栏布局
.twoContain {height: 300px;display: flex;}.twoContain .twoContainSonLeft {width: 300px;background-color: yellowgreen;height: 100%;}.twoContain .twoContainSonRight {flex: 1;background-color: blue;}
浮动+BFC实现两栏布局
.twoContain {height: 300px;}.twoContainSonLeft {float: left;/* 定宽 */width: 200px;height: 100%;background-color: chartreuse;}.twoContainSonRight {/* 不设置宽度自适应 */height: 100%;/*触发BFC条件*/overflow: hidden;background-color: coral;}
左边盒子不定宽度右边盒子自适应
浮动+BFC实现两栏布局
原理:给正常元素添加BFC属性,正常元素就不会被遮挡,且环绕浮动元素排开
.twoContain {height: 300px;}.twoContainSonLeft {float: left;/* 不定宽 */height: 100%;background-color: chartreuse;}.twoContainSonRight {/* 不设置宽度自适应 */height: 100%;/*触发BFC条件*/overflow: hidden;background-color: coral;}
一波小总结:以上脱离文档流的方式(如浮动、定位),他们的大体思路都是: 先让左定宽元素脱离文档流,这样可以右列正常能够与左列脱离文档流的元素“站成一排”,此时左列元素还覆盖着右列元素,最后,我们只需要调整一下右列元素的外边距啊、定位啊什么的就可以完成啦~
用flex布局也可以实现两栏布局
.twoContain {height: 300px;display: flex;
}.twoContain .twoContainSonLeft {background-color: yellowgreen;height: 100%;
}.twoContain .twoContainSonRight {flex: 1;background-color: blue;
}
三栏布局
三栏布局的效果就是左边盒子固定宽度,右边盒子固定宽度,中间盒子自适应
方法一触发BFC
<div class="threeContain"><div class="threeContainSonLeft">threeContainSonLeft</div><div class="threeContainSonRight">threeContainSonRight</div><div class="threeContainSonMiddle">threeContainSonMiddle</div></div>
.threeContain{}.threeContainSonLeft{width: 200px;float: left;background-color: red;}.threeContainSonMiddle{background-color: blue;overflow: hidden;}.threeContainSonRight{width: 200px;float: right;background-color: green;}
原理:让左右两边盒子分别左右浮动,然后中间盒子的div写在左右两个盒子下面然后通过overflow去触发BFC让盒子围绕脱离文档流的元素排列。
方法二让中间盒子使用margin-left和margin-right去处理
.threeContain{}.threeContainSonLeft{width: 200px;float: left;background-color: red;}.threeContainSonMiddle{background-color: blue;margin-left: 200px;margin-right: 200px;}.threeContainSonRight{width: 200px;float: right;background-color: green;}
通过flex布局实现三栏布局
<div class="threeContain"><div class="threeContainSonLeft">threeContainSonLeft</div><div class="threeContainSonMiddle">threeContainSonMiddle</div><div class="threeContainSonRight">threeContainSonRight</div></div>
.threeContain{display: flex;}.threeContainSonLeft{width: 200px;background-color: red;}.threeContainSonMiddle{background-color: blue;flex: 1;}.threeContainSonRight{width: 200px;background-color: green;}
通过定位实现三栏布局【两栏布局也可以用定位】
注意div的盒子顺序
<div class="threeContain"><div class="threeContainSonLeft">threeContainSonLeft</div><div class="threeContainSonRight">threeContainSonRight</div><div class="threeContainSonMiddle">threeContainSonMiddle</div></div>
.threeContain{position: relative;}.threeContainSonLeft{position: absolute;left: 0;width: 200px;background-color: red;}.threeContainSonMiddle{background-color: blue;margin-left: 200px;margin-right: 200px;}.threeContainSonRight{position: absolute;right: 0;width: 200px;background-color: green;}
前端两栏布局和三栏布局相关推荐
- HCJ2:页面两栏式或三栏式布局
2.1 简介 大家在进行页面布局的时候,可能会遇见两栏式布局与三栏式布局,如下图所示: 两栏式 例子: 三栏式 2.2 方法 2.2.1 两栏式 .left-pane{width: 14%;heigh ...
- 常用布局简介(单列布局、两列布局、三列布局、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.方法四 左侧定位,右侧有一层容器,设置容器左 ...
- 两栏布局和三栏布局的方式常见的
两栏布局的方式左边定宽,右边自适应 实现方式 1 margin-left float 2 display: flex; flex: 1; <!DOCTYPE html> ...
最新文章
- bash命令怎么在linux系统中使用
- 00-elasticsearch的pom文件
- vba里面的日期数据转换异常(Format error)(使用IsDate方法部分解决)
- python分配 使最大的最小_python3中的heapq模块使用
- jquery设置video的宽度_jquery html5 视频播放控制代码
- 物流配送系统设计java,ZigBee物流配送系统设计
- 10 分钟,带你快速入门前端三大技术(HTML、CSS、JavaScript)
- Windows Phone 7 不温不火学习之《Expression Blend 创建渐变效果和创建Storyboard动画》...
- [例程]string.trim().length()的用法
- 让我们准备祭奠小米帝国
- pr剪辑打开多个项目_写给后期剪辑新手的PR软件基础操作全流程指南
- 语音识别——语言模型
- shader篇-纹理-渐变纹理
- python ean13条形码的验证_在Matplotlib中显示EAN13条形码
- mac下统计代码行数方法
- 笛卡尔坐标系和齐次坐标系
- 从前端角度分析浏览器响应时间慢等情况
- 全球首位 AI 律师出庭,花 100 万美元找“传话筒”!网友:头脑正常的人谁会同意?...
- python基础知识补充
- 算法——连续性后处理(把26邻域连续的变成6邻域连续的)