方法一： 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. 【中文排序】mysql order by 中文排序

    1. 在MySQL中,我们经常会对一个字段进行排序查询,但进行中文排序和查找的时候,对汉字的排序和查找结果往往都是错误的. 这种情况在MySQL的很多版本中都存在. 如果这个问题不解决,那么MySQL ...

  2. Ubuntu 16.04安装qt5-default报错：qt5-default : 依赖: qtbase5-dev E: 无法修正错误，因为您要求某些软件包保持现状，就是它们破坏了软件包间的依赖关系。（此类问题终极解决方法）

    切记:没事不要进行sudo apt-get upgrade 错误: qt5-default : 依赖: qtbase5-dev E: 无法修正错误,因为您要求某些软件包保持现状,就是它们破坏了软件包间 ...

  3. {head first} --- networking 1

    Head first系列的书确实非常好,深入浅出解说网络的组成.让曾经那些生涩的概念生动起来. Chapter 1 维修物理网络 CAT5电缆: 两端为RJ-45接头(水晶头).内部为UTP(非屏蔽双 ...

  4. 【SSH 基础】浅谈Hibernate--入门篇

    Hibernate是什么 Hibernate是一个轻量级的ORMapping框架 ORMapping原理(Object Relational Mapping)就是把对象里面的数据和数据库里面的数据,依 ...

  5. Ckeditor通过Ajax更新数据

    之前在表单中对ckeditor的赋值就直接是 $("#theadEditor").val(result); 而如今我想通过点击不同选项来使用Ajax在后台訪问数据.对ckedito ...

  6. 开发，从需求出发 &#183; 之二 造飞机的工厂

    CD镇楼~~! 如今.让我们切换到后端开发者的角度看问题.我们须要做的是实现一下这个类,让它返回真实的业务数据. package cn.com.sitefromscrath.service; impo ...

  7. easyUI datagrid 前端真分页

    前文再续,书接上一回.easyUI datagrid 前端假分页 http://blog.csdn.net/leftfist/article/details/43164977 真分页是easyUI d ...

  8. busybox的使用

    1 将busybox设置为静态链接,放在文件系统中使用 make menuconfig的时候,Busybox Settings --> Build Options --> Build Bu ...

  9. 稀疏表示 Sparse Representation

    稀疏表示_百度百科 https://baike.baidu.com/item/%E7%A8%80%E7%96%8F%E8%A1%A8%E7%A4%BA/16530498 信号稀疏表示是过去近20年来信 ...

  10. python 时区

    Python中的时区处理  http://tech.glowing.com/cn/dealing-with-timezone-in-python/ Python时区设置方法与pytz查询时区教程_py ...