css实现左边定宽右边自适应的5种方法总汇
在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下:
<div class="box">
<div class="left">左边定宽</div>
<div class="right">右边自适应</div>
</div
1、浮动布局
左边设置左浮动,右边宽度设置100%
.left{width:200px;float:left;background: red;}
.right{width:%;margin-left: 200px;background: blue;}/*等于左边栏宽度*/
2.flex布局
父容器设置 display:flex;Right部分设置 flex:1
.box{ display: flex;}
.left{width:200px;background: red;}
.right{width:%;flex:;background: blue;}/*等于左边栏宽度*/
3、使用负margin
首先需要修改html结构,为自适应部分添加容器 .right_content, 同时改变左右部分的位置。
html结构:
<div class="box">
<div class="left">左边定宽</div>
<div class="right">
<div class="right_content">右边自适应</div>
</div>
</div>
css代码:
*{margin:;padding: ;}
.left{width:200px;float:left;margin-right:-200px;background: red;}
.right{width:%;float:left;}
.right_content{margin-left:200px;background: blue;}
4.绝对定位
左右两边都绝对定位
.left{width:200px;background: red; position: absolute;left:;}
.right{width:%;background: blue;position: absolute;left:200px;}/*等于左边栏宽度*/
办公资源网址导航 https://www.wode007.com
5.table布局
table(父级元素)与tabel-cell(两个子集元素)
.box{display: table;width:%;}
.left{width:200px;background: red; display: table-cell;}
.right{background: blue; display: table-cell;}
display:table-cell的元素具有以下特性:
text-align、vertical-align等对齐属性起作用,margin不起作用。宽高百分比值不起作用。
会生成虚拟的table、tr把自己包裹住,如果有相邻的兄弟元素也被设置了table-cell,则会跟兄弟元素一起生成虚拟的table、tr把自己包裹住,并一行等高显示
多个table-cell元素会占满被设置了display: table的元素的宽度,如果一个元素被设置了宽度,那么其他剩余的table-cell元素会占满剩下的宽度。当然,如果只有一个table-cell元素,就算设置了宽度也会占满table元素的宽度。
对设置了float、absolute的元素不起作用。且IE6、7不支持
css实现左边定宽右边自适应的5种方法总汇的更多相关文章
- css布局:定宽,自适应
css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...
- CSS 实现行内和上下自适应的几种方法
在写一个移动端网页,发现网页的头部搜索框两边各有固定宽度的按钮,搜索框可以根据宽度的变化来改变自己的宽度,达到填充的目的,也就是一种自适应吧,下面写写自己尝试的几种方法 一 利用css3 的width ...
- css布局:左边固定宽度,右边自适应;右边固定宽度,左边自适应
左边固定宽度,右边自适应 浮动布局的方法 <section class="container homeSection" id="mainSection"& ...
- css布局:左边定宽、右边自适应
方法一 : 左边 左浮动,右边 margin-left *{margin: 0;padding: 0;} .left{ float: left; width: 200px; border: 1px s ...
- CSS布局 -- 左右定宽,中间自适应
左右定宽,中间自适应 有几种方法可以实现 改变窗口大小看看? 方案一: 左右设置绝对定位,定宽,中间设置margin-left margin-right 查看 demo <!DOCTYPE h ...
- CSS基础布局--居中对齐,左侧定宽右侧自适应
CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...
- css 关于两栏布局,左边固定,右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
- css布局:左边固定宽度,右边自适应宽度或右侧固定,左侧自适应三种方法
方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
- CSS布局 两列布局之单列定宽,单列自适应布局思路
前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...
随机推荐
- java实现金额组合
某财务部门结账时发现总金额不对头.很可能是从明细上漏掉了某 1 笔或几笔. 如果已知明细账目清单,能通过编程找到漏掉的是哪 1 笔或几笔吗? 如果有多种可能,则输出所有可能的情况. 我们规定:用户输入 ...
- 震惊!当Python遇到Excel后,将开启你的认知虫洞
本文主要内容: 1. Excel,你为什么如此强大 2. 软件开发也需要团队作战 3. Excel的集成方案演化 4. macOS特有的集成方案:applescript 5. Python与Exc ...
- Spring Cloud 系列之 Apollo 配置中心(四)
本篇文章为系列文章,未读前几集的同学请猛戳这里: Spring Cloud 系列之 Apollo 配置中心(一) Spring Cloud 系列之 Apollo 配置中心(二) Spring Clou ...
- android日常开发总结的技术经验60条
全部Activity可继承自BaseActivity,便于统一风格与处理公共事件,构建对话框统一构建器的建立,万一需要整体变动,一处修改到处有效. 数据库表段字段常量和SQL逻辑分离,更清晰,建议使用 ...
- .NET 技术栈 思维导图
背景介绍 根据网上招聘网站的一些.NET技能需求,画了一个图,便于在自修和学习的过程当中有一个方向. 技能栈 Web front-end o 框架技术 ▣ Vue ▣ Bootstrap ▣ LayU ...
- 03.Java的前世今生
C&C++ 1972年C诞生 ◆贴近硬件,运行极快,效率极高. ◆操作系统,编译器,数据库,网络系统等 ◆指针和内存管理 1982年C++诞生 ◆面向对象 ◆兼容C ◆图形领域.游戏等 背景 ...
- WPF中DataTemplateSelector的简单应用
WPF中DataTemplateSelector的简单应用 DataTemplateSelector中文叫数据模板选择器,根据数据模型内的属性值选择不同的数据模板,多用于容器如listbox中,达到同 ...
- 使用 Spark SQL 高效地读写 HBase
Apache Spark 和 Apache HBase 是两个使用比较广泛的大数据组件.很多场景需要使用 Spark 分析/查询 HBase 中的数据,而目前 Spark 内置是支持很多数据源的,其中 ...
- 破解版BrupSuite安装及其问题解决及环境部署
一 下载 BrupSuite_pro_v1.7.37的压缩包百度网盘链接: https://pan.baidu.com/s/1KkuseybjpuHo-6V4_wh9vw 提取码: 3vcs 说明一下 ...
- webpack介绍—上
6.1 webpack概念的引入 在网页中会引用哪些常见的静态资源? JS .js. .jsx ..coffee. .ts(TypeScript 类 C# 语言) CSS .css. .less. . ...