html左200px右边自适应,实现一个div，左边固定div宽度200px，右边div自适应

实现一个div，左边固定div宽度200px，右边div自适应

/*方法一： BFC(块级格式化上下文)*/

.container{

width:1000px;height:400px;border: 1px solid red;

}

.left{

width:200px;height:100%;background: gray;

float: left;

}

.rigth{

overflow:hidden; /* 触发bfc */

background: green;

}

/*方法二： flex布局 */

.container{

width:1000px;height:400px;border:1px solid red;

display:flex; /*flex布局*/

}

.left{

width:200px; height:100%;background:gray;

flex:none;

}

.right{

height:100%;background:green;

flex:1; /*flex布局*/

}

/* 方法三： table布局 */

.container{

width:1000px;height:400px;border:1px solid red;

display:table; /*table布局*/

}

.left{

width:200px; height:100%;background:gray;

display:table-cell;

}

.right{

height:100%;background:green;

display: table-cell;

}

/*方法四： css计算宽度calc*/

.container{

width:1000px;height:400px;border:1px solid red;

}

.left{

width:200px;height:100%;background:gray;

float:left;

}

.right{

height:100%;background:green;

float:right;

width:calc(100% - 200px);

}

---------------------------------------------------------------------------------------------------

左边固定宽度

右边撑满剩余宽度

NO.14 两个div并排，左边为绝对宽度，右边为相对宽度

两个div并排,左边为绝对宽度,右边为相对宽度,这个问题,我也经常遇到,我一般的处理方法是将最大的容器padding-left固定宽度,左边的固定宽度的一块position:absolute,然后ri ...

css网页布局 --- 左边固定，右边自适应

div的布局统一如下:

DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

实现左边div固定宽度，右边div自适应撑满剩下的宽度的布局方式：

html:

left固定宽度200px ...

设置一个DIV块固定在屏幕中央(两种方法)

设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中.

实现三个div，固定左右两边的div宽为200，中间的div宽度自适应的四种方法

...

div左边固定宽度，右边自适应宽度

样式:

CSS 左边div固定，右边div自适应

有时候我们会有这样的需求,如图,aside是导航或者某些链接,右边的main是显示重要的内容,左边需要定宽,右边的main能够自适应剩余的宽度: q ...

css实现左边div固定宽度，右边div自适应撑满剩下的宽度

(1)使用float

& ...

随机推荐

SQL语法

full outer--全连.两表相同的组合在一起,A表有,B表没有的数据(显示为null),同样B表有,A表没有的显示为(null) A表 left join B表--左连,以A表为基础,A表的全部 ...

【转】使用:after清除浮动

以前总是加一个

来解决,但这样会增加无语义的标签,下面是用after伪类实现,兼容多种浏览器.cl ...

R中NA和NaN的区别

NA表示的是缺失数据,missing data NaN表示无意义的数据,Not a Number, Inf-Inf Inf表示正无穷大 -Inf表示负无穷大

hql 多表查询

sql 单表/多表查询去除重复记录单表distinct多表group by select h from Hytxbz as h,Tgbzk as t where h.hytxbzid=t.hytxbz ...

node.js中favicon.ico请求两次问题

var http=require("http"); var server=http.createServer(); server.on("request",fu ...

Hadoop集群搭建-full完全分布式(三)

环境:Hadoop-2.8.5 .centos7.jdk1.8 一.步骤 1).4台centos虚拟机 2). 将hadoop配置修改为完全分布式 3). 启动完全分布式集群 4). 在完全分布式集群 ...

nginx概述

1)nginx的特性: 模块化设计,较好的扩展性 高可靠性 master/worker 支持热部署 不停机更新配置文件,更换日志,更新服务器程序版本 低内存消耗 支持event-driven,alo, ...

PAT 1041 考试座位号

https://pintia.cn/problem-sets/994805260223102976/problems/994805281567916032 每个PAT考生在参加考试时都会被分配两个座位 ...

windows环境下搭建kafka

注意:请确保本地Java环境变量配置成功 1.安装Zookeeper Kafka的运行依赖于Zookeeper,所以在运行Kafka之前我们需要安装并运行Zookeeper 1.1 下载安装文件: h ...

02 - JavaSE之基础及面向对象(补充)

引用数据类型 java中的数据类型可以分为 基本数据类型 和 引用数据类型 两大类 int float char boolean等都是基本数据类型 类类型都是引用数据类型 引用数据类型类似C语言中的指 ...