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. Java开发名词解释

    API 问题:API 解释:API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组 ...

  2. WPS:多组件模式与整合模式的调节

    首页 设置中心 切换窗口管理模式 多组件和整合模式

  3. urllib-访问网页的两种方式：GET与POST

    学习自:https://www.jianshu.com/p/4c3e228940c8 使用参数.关键字访问服务器 访问网络的两种方法: 1.GET 利用参数给服务器传递信息 参数data为dict类型 ...

  4. 引入的ip地址，打包以后可以随意更改

    我用我自己的方法,也是实验一步一步搞出来的,被我们运维打了好几顿才出现的结果.不喜勿喷. 第一步,我们把写上地址的js文件放在vue的静态文件里,老项目都是static,新项目都是放在public文件 ...

  5. mysql-索引对性能影响

    1.添加索引后查询速度会变快 mysql中索引是存储引擎层面用于快速查询找到记录的一种数据结构,索引对性能的影响非常重要,特别是表中数据量很大的时候,正确的索引会极大的提高查询效率.简单理解索引,就相 ...

  6. 使用PostgreSQL 脚本导出数据库的DDL

    使用PostgreSQL 脚本导出数据库的DDL 本文主要介绍如何使用基于 PostgreSQL pgdump编写的自定义脚本来导出数据库的DDL. 一.文件说明: 1.pgdump基础语句.sql: ...

  7. Vue-表单验证-全选-反选-删除-批量删除

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

  8. LGP7840题解

    给出一种新的理解方式,本质上和正解是一致的. 首先我们现在已经有了一个森林,我们现在要给他加一条边,加哪一条边是最优的呢? 假设加的边是 \((u,v)\),那么 \(((d[u]+1)^2-d[u] ...

  9. Docker-compose 搭建 Harbor私有仓库

    一. 安装docker-compose 1. 下载docker-compose的最新版本 curl -L "https://github.com/docker/compose/release ...

  10. 企业网络防范Serv-U的漏洞

    很多企业都将自己的网站建立在互联网上,日常有专门的维护人员进行维护,很多时候对网站的更新当然不是直接在服务器上操作,而是将要更新的网页页面通过FTP工具上传到服务器上实现.因此必须要在服务器上搭建起一 ...