1. float 单一层浮动法
    左侧固定成100px; 则核心代码 左侧：width:100px;float:left; 右侧 width:auto;margin-left:100px;
    绝大浏览器是没有任何问题的，除了万恶的浏览器IE6，两层中间有缝隙 3px;
  2. 定位
    在固定元素上加入绝对定位，自适应元素设置成margin-left:固定元素的宽度
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>css</title>

<style type="text/css">

    * {

      margin:0;

      padding:0;

    }

    .container{

      height:200px;

      background-color: pink;

    }

    .left{

      width:100px;

      border-right:none;

      height:50px;

      float:left;

      background-color:yellow;

    }

    .right{

      margin-left:100px;

      width:auto;

      height:100px;

      background-color:blue;

    }

    .container1{

      height:200px;

      background-color: pink;

      position: relative;

    }

    .left1{

      position: absolute;

      top: 0;

      left: 0;

      width:100px;

      border-right:none;

      height:50px;

      /* float:left; */

      background-color:yellow;

    }

    .right1{

      margin-left:100px;

      width:auto;

      height:100px;

      background-color:blue;

    }

</style>

</head>

<body>

    <div class="container">

        <div class="left"></div>

        <div class="right"></div>

    </div>

    <div>aaa</div>

    <div class="container1">

      <div class="left1"></div>

      <div class="right1"></div>

  </div>

</body>

</html>

  • 主流浏览器都是支持的 包括IE6，除了这些还可以进行扩展 例如：，在两个元素加上border，就可以实现，如果采用第一种方法 IE7 是不支持 显示的效果会是这样。
  • 所以说 第二种还是不错的，不少大家都会误解有时候 在float和定位都可以实现的时候，到底要采用哪种方式，我觉得那要看你想要兼容哪种浏览器，主流的（非IE6）两种都很不错，但是IE中关于float的bug 太多

css布局中左侧固定右侧自适应的更多相关文章

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

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

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

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

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

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

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

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

  5. CSS左侧固定右侧自适应

    方法一: float + margin.left{ float: left; width: 100px; }.right {margin-left:100px; } /*清除浮动*/ .contain ...

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

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

  7. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

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

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

  9. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

随机推荐

  1. STL漫游之vector

    std::vector 源码分析 从源码视角观察 STL 设计,代码实现为 libstdc++(GCC 4.8.5). 由于只关注 vector 的实现,并且 vector 实现几乎全部在头文件中,可 ...

  2. c语言刷 队列题记录

    622. 设计循环队列 https://blog.csdn.net/Galaxy_n/article/details/115978544 typedef struct { int *arrs; int ...

  3. 报错:net::err_unknown_url_scheme的解决办法

    在项目中设置了api请求和web页面请求的地址,如下图: 控制台报错,如下图: 问题是:没有加入"http://"这个头,因此访问不到. 解决办法: 再次访问正常

  4. C# Winform中FpSpread表格控件设置固定的（冻结的）行或列

    在项目中我们经常会用到固定表头的操作,FpSpread提供了冻结行或列的属性. 你可以冻结表单中的行或列(使其不可滚动). 你可以冻结任意个表单顶部的行,使其成为前导行,你也可以冻结左侧任意多个列,使 ...

  5. 超好用的Markdown编辑器Typora中的常见语法

    目录 下载网址 安装 一.标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 二.语法环境 三.单选 四.字体 五.分割符 六.列表 七.图片引入 八.表格 九.超链接 下载网址 正版中 ...

  6. 字符串格式化String.Format

    //给变量赋值字符串00002 string s = String.Format( "{0:d5}", 2);

  7. Eureka单机&集群配置

    目录 Eureka是什么 自我保护机制 版本选择 服务搭建 创建项目 导入GAV坐标 application启动类添加注解 配置yml 启动项目 集群配置 修改上面的yml 打jar包到另外一台电脑O ...

  8. OCCT基础

    基础 构成总览 Root类 基本类型,如布尔,字符,整数或实数 安全处理动态创建的对象,确保自动删除未引用的对象 可配置的内存管理器,提高了应用程序的性能 包含运行时类型信息机制,有助于创建复杂应用 ...

  9. ASP.NET Core 6框架揭秘实例演示[23]：ASP.NET Core应用承载方式的变迁

    ASP.NET Core应用本质上就是一个由中间件构成的管道,承载系统将应用承载于一个托管进程中运行起来,其核心任务就是将这个管道构建起来.从设计模式的角度来讲,"管道"是构建者( ...

  10. U8g2库的使用

    一.硬件介绍: 由于笔者这里只有0.96寸的OLED屏幕,那就讲讲最常用的0.96寸OLED屏幕吧. OLED介绍: OLED,即有机发光二极管( Organic Light Emitting Dio ...