实现一个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:
设置一个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语言中的指 ...