CSS | 自适应两栏布局方法
html代码:
<div class="main">
<div class="left" style="background: #00FF7F; width: 200px; min-height: 200px;">固定宽度</div>
<div class="right" style="background: #87CEEB;min-height: 300px;">自适应区域</div>
</div>
1.浮动+margin
第一种: 左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度。
.left{ float: left;}
.right{ margin-left: 200px;}
2.绝对定位
第二种:左边绝对定位(脱离文档流,不占位置),右侧margin-left流出左侧栏宽度
.left{ position: absolute;}
.right{margin-left: 200px;}
缺点:
使用了绝对定位,若是用在某个div中,需要更改父容器的position。
没有清除浮动的方法,若左侧盒子高于右侧盒子,就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况。
3.float+calc()函数
第三种:左侧float、右侧float+calc()计算属性
.left{ float: left;}
.right{float:right; width:calc(100%-200px);}
4.float+BFC
第四种:float+BFC BFC区域不会与float元素区域重叠
.left{ float: left;}
.right{overflow:hidden;}
5.flex
第五种:flex
.main{ display: flex;}
.right{flex: 1;}
CSS | 自适应两栏布局方法的更多相关文章
- CSS 实现左侧固定,右侧自适应两栏布局的方法
"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...
- css 关于两栏布局,左边固定,右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
- 七种CSS左侧固定,右侧自适应两栏布局
一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...
- CSS实现两栏布局
写在前面 两栏布局是指页面布局由主栏和边栏组成,是许多网页的布局方式,一般使用CSS去实现两栏布局. 实现两栏布局的方式有多种,这里采用四种比较常见的实现方式.主要是流体布局(liquid layou ...
- css的两栏布局
经典的实现左边固定宽度,右边宽度自适应的几种方法 利用float和margin-left属性(margin-left的值可以稍稍大于或者等于.left的宽度) .left{ width: 30px; ...
- css实现两栏布局,左侧固定宽,右侧自适应的7中方法
一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...
- CSS 实现:两栏布局(一边固定,一边自适应)
☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...
- 如何用CSS实现左侧宽度固定,右侧自适应(两栏布局)?左右固定中间自适应(三栏布局)呢?
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
- css布局 - 工作中常见的两栏布局案例及分析
突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法.临时就在我经常浏览的网站上抓的相对应的截图.(以后看到其他类型的我再补充) 既然截了图,咱们就直接看人家使用的布局方式,毕 ...
随机推荐
- Fabric1.4源码解析:Peer节点启动过程
看一下Peer节点的启动过程,通常在Fabric网络中,Peer节点的启动方式有两种,通过Docker容器启动,或者是通过执行命令直接启动. 一般情况下,我们都是执行docker-compose -f ...
- JS中的同步异步编程
首先我们先看看同步与异步的定义,及浏览器的执行机制,方便我们更好地理解同步异步编程. 浏览器是多线程的,JS是单线程的(浏览器只分配一个线程来执行JS) 进程大线程小:一个进程中包含多个线程,例如 ...
- 【日常错误】Could not initialize class org.hibernate.validator.internal.engine.ConfigurationImpl
最近在用spring-boot编写一个Lucene项目,中间用到了redis,引用了spring-boot-starter-data-redis,在eclipse中用外部Tomcat启动项目一切正常, ...
- java switch语句 要点注意
1.格式 switch(表达式){ case 常量1:语句1:break: case 常量2:语句2:break: case 常量3:语句3:break: .... case 常量n:语句n:brea ...
- 【github repo自荐】码农周刊一周精选分类
以下内容节选自我的github码农周刊整理repo,欢迎大家star. 写在最前面的话 作为最初的一批码农周刊的订阅者,不能说经历了其成长,但是确实见证了他的壮大.码农周刊确实从开始第一期的基本上都是 ...
- element table 先显示暂无数据 之后再加载数据 问题
项目中的表格请求数据时,进去页面,先出现 ''暂无数据'' 字样闪现一下之后在进行加载数据,用户体验十分不好 解决办法: <template> <el-table :data=&qu ...
- NAT回流(Twice NAT)Hairping 参数详解
内网用户需要通过域名访问内网的服务器,一般商用环境是无法访问的,需要经过以下配置,原理不说了,直接说配置. nat (inside,inside) source dynamic inside-net ...
- 基于Java语言的IO操作(文件复制)
public static void main(String[] args) { //获取复制开始前系统时间毫秒值 long start=System.currentTimeMillis(); //文 ...
- Zookeeper Watcher接口
在ZooKeeper中,接口类Watcher用于表示一个标准的事件处理器,其定义了事件通知相关的逻辑,包含KeeperState和EventType两个枚举类,分别代表了通知状态和事件类型,同时定义了 ...
- [TimLinux] django SELinux+httpd+mod_wsgi部署
1. 实验项目 $ django-admin startproject myweb $ cd myweb/ $ python manage.py startapp poll 1. 配置使用MySQL ...