css实现两栏布局,左侧固定宽,右侧自适应的多种方法


Posted in HTML / CSS onAugust 07, 2021

css实现两栏布局,左侧固定宽,右侧自适应的7种方法,代码如下所示:

 1、利用 calc 计算宽度的方法 css代码:

.box>div{height: 100%;}
#box1>div{float: left;}
.left1{width: 100px;background: yellow;}
.right1{background: #09c;width:calc(100% - 100px);}

dom结构:

<div class="box" id="box1">
    <div class="left1">左侧定宽</div>
    <div class="right1">右侧自适应</div>
</div>

2、利用 float 配合 margin 实现 css代码:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
.left2{float: left;background: yellow;width: 100px;}
.right2{background: #09c;margin-left: 100px;}

dom结构:

<div class="box" id="box2">
    <div class="left2">左侧定宽</div>
    <div class="right2">右侧自适应</div>
</div>

3、利用 float 配合 overflow 实现 css代码:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
.left3{float: left;background: yellow;width: 100px;}
.right3{background: #09c;overflow: hidden;}

dom结构:

<div class="box" id="box3">
    <div class="left3">左侧定宽</div>
    <div class="right3">右侧自适应</div>
</div>

4、利用 position:absolute 配合 margin 实现

css代码:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box4{position: relative;}
.left4{position: absolute;left: 0;top:0;width: 100px;background: yellow;}
.right4{margin-left:100px;background: #09c;}

dom结构:

<div class="box" id="box4">
    <div class="left4">左侧定宽</div>
    <div class="right4">右侧自适应</div>
</div>

5、利用 position:absolute 实现

css代码:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box5{position: relative;}
.left5{position: absolute;left: 0;top:0;width: 100px;background: yellow;}
.right5{position: absolute;left: 100px;top:0;right: 0;width: 100%;background: #09c;}

dom结构:

<div class="box" id="box5">
    <div class="left5">左侧定宽</div>
    <div class="right5">右侧自适应</div>
</div>

6、利用 display: flex 实现

css代码:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box6{display: flex;display: -webkit-flex;}
.left6{flex:0 1 100px;background: yellow;}
.right6{flex:1;background: #09c;}

dom结构:

<div class="box" id="box6">
    <div class="left6">左侧定宽</div>
    <div class="right6">右侧自适应</div>
</div>

7、利用 display: table 实现 css代码:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box7{display: table;width: 100%;}
#box7>div{display: table-cell;}
.left7{width: 100px;background: yellow;}
.right7{background: #09c;}

dom结构:

<div class="box" id="box7">
    <div class="left7">左侧定宽</div>
    <div class="right7">右侧自适应</div>
</div>

到此这篇关于css实现两栏布局,左侧固定宽,右侧自适应的7中方法的文章就介绍到这了,更多相关css两栏布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3教程(5):网页背景图片
Apr 02 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 HTML / CSS
flex弹性布局详解
Mar 20 HTML / CSS
CSS 实现Chrome标签栏的技巧
纯html+css实现Element loading效果
纯html+css实现奥运五环的示例代码
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 #HTML / CSS
CSS实现两列布局的N种方法
Aug 02 #HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 #HTML / CSS
纯html+css实现打字效果
You might like
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
两种php实现图片上传的方法
2016/01/22 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
JS 字符串连接[性能比较]
2009/05/10 Javascript
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
使用SAE部署Python运行环境的教程
2015/05/05 Python
python中set()函数简介及实例解析
2018/01/09 Python
python绘制简单彩虹图
2018/11/19 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
Python类的继承用法示例
2019/01/31 Python
Python zip函数打包元素实例解析
2019/12/11 Python
python将音频进行变速的操作方法
2020/04/08 Python
Django日志及中间件模块应用案例
2020/09/10 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
医院总经理职责
2013/12/26 职场文书
12岁生日感言
2014/01/21 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
画展邀请函
2015/01/31 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
承兑汇票延期证明
2015/06/23 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL