css布局 右固定,CSS左侧固定右侧自适应的五种布局方法
在页面或者布局列表中，常常有左侧固定，右侧自使用的情况，接下来，这五种方法满足这个需求。
一、左边浮动，右边margin
.box{
height: 200px;
background-color: skyblue;
}
.left{
float:left;
width:100px;
height:200px;
}
.right{
margin-left:100px;
height:200px;
background:yellowgreen;
}
二、左边浮动，右边hidden。
这样右边的盒子就变成了一个绝缘的盒子。(所谓绝缘，就是和其他盒子不会有交集)
.box{
height: 200px;
background-color: skyblue;
}
.left{
width:100px;
height:200px;
background:yellowgreen;
float:left;
}
.right{
overflow:hidden;
height:200px;
}
三、父盒子设置padding，左边盒子定位
.box{
height: 200px;
background-color: skyblue;
padding-left: 100px;
position: relative;
}
.left{
width: 100px;
height: 200px;
background-color: yellowgreen;
position: absolute;
top:0;
left:0;
}
.right{
width: 100%;
}
四、table实现
.box{
width:100%;
}
.left{
width:100px;
height:200px;
background:skyblue;
}
.right{
background:yellowgreen;
}
五、flex实现
.box{
height: 200px;
background-color: skyblue;
display: flex; /* 设置为flex容器 */
}
.left{
width: 100px;
height: 200px;
}
.right{
height:200px;
background:yellowgreen;
flex:1; /* 比例设置为1，撑满剩余空间 */
}
css布局 右固定,CSS左侧固定右侧自适应的五种布局方法相关推荐
- 实现左侧固定宽度, 右侧自适应的两栏布局常见方法
两栏布局方案 实现左侧固定, 右侧自适应的布局方案, 常见的几种, 写了一个各个方案实现效果的Demo, 可以通过这里查看: 预览 首先统一html结构 <div class="con ...
- html固定右侧显示,html+css布局之--左边固定宽，右侧自适应（4种方法）
今天,在网上看到一个题目,关于布局的,左边固定宽,右侧自适应(不少于3种方法),看到问题手痒自己试了一下,想了四种方法,码一下. 有好的方法,可以告诉我! html: 第一种:定位+margin-le ...
- 【转】Android 面试题笔记-------android五种布局及其作用
文章来源:http://blog.csdn.net/zhanglei1239/article/details/7354170 android常用的五种布局分别是:FrameLayout.LineaLa ...
- Android中常见五种布局管理器——RelativeLayout、LinearLayout、FrameLayout、TableLayout、GridLayout
目录 布局管理器 RelativeLayout 常见属性 Relative的实践操作(实现软件更新界面) LinearLayout 常见属性 LinearLayout的实践操作(模范登录以及微信底部) ...
- 网页右边固定php,左侧固定，右侧自适应的布局方式
这次给大家带来左侧固定,右侧自适应的布局方式,左侧固定,右侧自适应布局方式的注意事项有哪些,下面就是实战案例,一起来看一下. 第一种方法: Document .one { position: abso ...
- HTML+CSS 五种布局方式
已知布局元素的高度,写出三栏布局,要求左栏.右栏宽度各为300px,中间自适应. 一.浮动布局 <!DOCTYPE html> <html> <head><m ...
- dw中css怎么设置段落格式,Dreamweaver文本段落缩进的五种方法
一.用自Dreaweave身所带的功能 1.在Dreamweaver中执行下面操作4次就可以插入两个汉字大小的空格. 2.用同背景色相同颜色的字符来完成插入空格,这种方法操作比较繁琐.不易修改,而且在 ...
- html页面布局是什么意思,html布局的常见类型有哪些？html的三种布局特点分析
html布局的常见类型有哪些?html中的布局方式有三种:流动布局.浮动布局以及层模型,html的这三种布局各有个的特点,本篇文章就给大家简单的说说html的三种布局方式的特点. 1.流动布局(htm ...
- flexbox布局_这是您可以使用FlexBox制作的5种布局
flexbox布局 The CSS Flexible Box Layout - Flexbox - provides a simple solution to the design and layou ...
最新文章
- Java实现选最远距离的座位_LeetCode算法题-Maximize Distance to Closest Person（Java实现）...
- c语言可以通过malloc在栈上,C语言内部静态成员陷阱
- php支付宝h5 app,H5网站接入支付宝的支付接口
- hdu 4291 矩阵幂 循环节
- jQuery事件2——off取消事件绑定
- 计算机用英语表示方法有哪些,在计算机领域中，通常用英文单词“bit”来表示（ ）...
- java解析csv文件写入mysql_java读取cvs文件并导入数据库
- html清除require报错,javascript - requirejs加载报错问题？
- C++11 并发指南三(Lock 详解)（转载）
- SilverLight企业应用框架设计【五】客户端调用服务端（使用JSON传递数据，自己实现RESTful Web服务）...
- sci论文发表的难度高吗
- ABBYY FineReader 12使用教程
- C#:实现Euclidean distance欧氏距离算法（附完整源码）
- 压网线教程图解（做水晶头）
- Win10、11登录微软账户时一直转圈
- 《寓言中的经济学》简明纪要 - Part 1
- 罗斯蒙特248温度变送器248HANANONS
- 感恩生命，永不放弃——学习力克胡哲
- 得到maya相机分辨率
- Kubernetes 1.22.9搭建 和 部署dashboard可视化UI
热门文章
- CSS3 pointer-events的应用
- cc2530i2c可同时接受两个传感器的数据吗_汽车方向及维修_玉树沃尔沃S40方向机,宝马531电子方向机进水可以维修吗...
- ARM中的ldr指令与adr、ldr伪指令之间的区别
- 关于WinCE中config.bib的问题
- 联想一体机电源键不亮_联想电脑一体机B505拆机经验
- 延边大学c语言题库,延边大学-SPOC官方网站
- 广义典型相关分析_重复测量数据分析及结果详解（之二）——广义估计方程
- 【转】ABP源码分析四十三：ZERO的本地化
- 【转】[完全免费] 在线UML Class Diagram 类图工具 - 教程第1部分
- 第二节：框架前期准备篇之AutoFac常见用法总结