方法一： float + margin
.left{
float: left;
width: 100px;
}
.right {
margin-left:100px;
}
/*清除浮动*/
.container1:after{
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}

方法二： 父容器设置 display：flex；Right部分设置 flex：1 

body{

display:flex;

}

.right{

flex-grow: 1;

}

CSS左侧固定右侧自适应的更多相关文章

  1. 七种CSS左侧固定,右侧自适应两栏布局

    一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...

  2. css布局中左侧固定右侧自适应

    float 单一层浮动法左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;绝大浏览器是没有任何问 ...

  3. css中左侧固定,右侧自适应

    谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度;       2.只告 ...

  4. html布局,左侧固定右侧自适应

    前几天看到我们的UI稿,要实现左侧固定树结构,右侧自适应.想着自己写过几次但是每次都会忘记,在这里做个笔记. 第一种方法: <!DOCTYPE html> <html lang=&q ...

  5. css左侧固定宽度右侧自适应

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

  6. css布局之左侧固定右侧自适应布局

    参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div st ...

  7. 一个简单的左侧固定右侧自适应demo

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  8. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  9. CSS左侧固定宽 右侧自适应（兼容所有浏览器）

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

随机推荐

  1. MyChrome制作Chrome浏览器便携版

    Google Chrome官方离线下载地址: https://api.shuax.com/tools/getchrome MyChrome下载地址: http://code.taobao.org/p/ ...

  2. 仪仗队（bzoj 2190）

    Description 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是 ...

  3. POJ 2828 Buy Tickets （线段树 || 树状数组）

    题目大意 一些小朋友在排队,每次来一个人,第i个人会插到第x个人的后面.权值为y.保证x∈[0,i-1]. 按照最后的队伍顺序,依次输出每个人的权值. 解题分析 好气吖.本来是在做splay练习,然后 ...

  4. [转] 结构体file_operations

    原文地址: http://www.cnblogs.com/sunyubo/archive/2010/12/22/2282079.html 结构体file_operations在头文件 linux/fs ...

  5. zoj3988 Prime Set

    思路不难想到二分图求个最大匹配P,若P>=K,则2*K即可,否则应为P*2+min(K-P,未匹配且有度数不为0的顶点个数s).但坑点在于有1的情况,所以如果直接建二分图去跑最大匹配会因为1的影 ...

  6. ibatis的初识

    在工作中,服务端的框架基本上是struts+spring+ibatis+velocity.ibatis曾经没有接触到,而曾经使用的hibernate在公司居然没碰着.同样都是数据库封装,为什么没有选择 ...

  7. Tutorial: Synchronizing State with Mutexes in Go

    go语言中用mutex实现状态同步. 原文:https://kylewbanks.com/blog/tutorial-synchronizing-state-with-mutexes-golang - ...

  8. 教程 | 使用Sqoop从MySQL导入数据到Hive和HBase

    基础环境 sqoop:sqoop-1.4.5+cdh5.3.6+78, hive:hive-0.13.1+cdh5.3.6+397, hbase:hbase-0.98.6+cdh5.3.6+115 S ...

  9. CentOS 查看日志命令

    cat tail -f 日 志 文 件 说    明 /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一 /var/log/secure 与安 ...

  10. Centos samba install

    Ready Change Root Password passwd root 在提示下建立新密码 静态IP vi /etc/sysconfig/network-scripts/ifcfg-eth0  ...