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. AndroidMainifest.xml文件属性

    1 <manifest xmlns:android="http://schemas.android.com/apk/res/android" 2 package=" ...

  2. Qt：输出为CSV文件时汉字乱码

    参考 (18条消息) QT5写csv文件,文件打开后中文显示乱码的问题解决_yanzi150207348的博客-CSDN博客 解决方法 1.在文件开头写一段: #if _MSC_VER >= 1 ...

  3. k8s全方位监控-prometheus-alertmanager部署-配置第一条告警邮件

    1.alertmanager告警插件部署 [root@VM_0_48_centos prometheus]# cat alertmanager-pvc.yaml apiVersion: v1 kind ...

  4. C# 字符串、数组和List的截取和转换

    using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...

  5. JZ-002-替换空格

    替换空格 题目描述 请实现一个函数,将一个字符串中的每个空格替换成"%20".例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. ...

  6. pygame写俄罗斯方块

    代码搬运修改自python编写俄罗斯方块 更新时间:2020年03月13日 09:39:17 作者:勤勉之 from tkinter import * from random import * imp ...

  7. python列表的操作(添加）

    1. 向列表里面加元素: 向python列表里面添加元素主要有三种方法: (1)append() append()对于列表的操作主要实现的是在特定的列表最后添加一个元素,并且只能一次添加一个元素,并且 ...

  8. 用Vue编写一个简单的仿Explorer文件管理器

    ​大家一定很熟悉你桌面左上角那个小电脑吧,学名Windows资源管理器,几乎所有的工作都从这里开始,文件云端化是一种趋势.怎样用浏览器实现一个Web版本的Windows资源管理器呢?今天来用Vue好好 ...

  9. VIM中简化删除，光标移动和查找操作

    # 一.命令行模式下简化删除 1. 向后删除单个字符:[x] 2. 向前删除单个字符:[X] 3. 删除从光标开始到单词结尾:[dw] 删除从光标后的2个单词:[d2w] 4. 删除整个单词:[daw ...

  10. TP5框架中实现多条件登录（自写代码，密码未md5()加密）

    HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...