两列布局：左边固定，右边自适应

第一种方法：左边的div左浮动或者是绝对定位，右边的div加margin-left:左边div的宽度

html部分

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

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

css部分

.left {

      position: absolute; /*这可以换成float:left,都可以使其脱离文档流*/

      height: 100px;

      width: 300px;

      background-color: blue;

 }

.right {

     height: 200px;

     margin-left: 300px;

     background-color: red;

 }

第二种方法：BFC(块级格式化上下文)

对于BFC的理解可以看 http://www.cnblogs.com/vitruvi/p/4303891.html

html部分和上面是一样的，下面只写css部分

.left {

         float: left;

         height: 200px;

          width: 300px;

          background-color: blue;

}

.right {

          overflow: auto;

          height: 200px;
　　　　　　background-color:red;
}

 第三种方法：这种方法其实是第一种方法的延伸

<div style="float:left;width:100%">

    <p style="margin-right:170px;">文字</p>

</div>

<img width='' style='float:left;margin-left:-150px;'>

这种方法与第一种方法的比较的好处就是dom的顺序和显示的顺序是一致的

第四种方法：flex

css:

 .containter{

            display: flex;

        }

       .left {

             width: 200px;

               background-color: blue;

         }

        .right {

          background-color: red;

          flex:1;

        }

html:

<div class="containter">

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

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

        </div>

第五种方法：table

       html *{

            margin:0;

            padding: 0;

        }

        .containter{

            display: table;

            width: 100%;

            height: 100%;

        }

       .left {

             width: 200px;

               background-color: blue;

               display: table-cell;

         }

        .right {

          background-color: red;

          display: table-cell;

        }

    <body>

        <div class="containter">

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

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

        </div>

    </body>

第六种：grid

.containter{

            display: grid;

            width: 100%;

            height: 100%;

            grid-template-rows:100px;

            grid-template-columns:200px auto;

        }

       .left {

             width: 200px;

               background-color: blue;

         }

        .right {

          background-color: red;

        }

两列布局：右边固定，左边自适应

第一种:float或position,其实和上面差不多

    .containter{

            width:400px;

            height: auto;

        }

        .right{

            width:100px;

            background: red;

            float: right;

        }

        .left{

            margin-right: 100px;

            background: blue;

        }

html

<div class="containter">

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

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

        </div>

第二种方法：BFC

  .left {

         height: 200px;

            overflow: auto;

          background-color: blue;

         }

        .right {

          float: right;

          background-color: red;

          height: 200px;

          width: 300px;

        }

html同上

css之页面两列布局的更多相关文章

  1. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  2. div+css经典三行两列布局

    写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...

  3. css之页面三列布局

    左右两边宽度固定,中间自适应 第一种方法:左右两边绝对定位 html代码 <div class="left"></div> <div class=&q ...

  4. css之页面三列布局之左右两边宽度固定，中间自适应

    左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...

  5. css之页面三列布局之左右上下高度固定，中间自适应

    第一种,绝对定位 !DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <tit ...

  6. 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局

    一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...

  7. 两列布局，读《css那些事儿》

    两列布局: 1.两列定宽: 要点:float.width固定. :after清除浮动. 前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象. <!DOCTYPE html> ...

  8. CSS读书笔记（1）---选择器和两列布局

    (1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...

  9. CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

随机推荐

  1. Centos6.5 设置Tomcat8 service服务实现自启动和服务管理

    Centos6.5 设置Tomcat8 service服务实现自启动和服务管理 将tomcat设置成像apache,nginx一样. 用serviec xxxx start/stop/restart ...

  2. 【转】error while loading shared libraries: libevent-2.0.so.5: cannot open shared object file: No such file or directory

    错误信息: /usr/local/memcacheq/bin/memcacheq: error while loading shared libraries: libevent-2.0.so.5: c ...

  3. CentOS MySQL 配置

    问题: MySQL安装后root用户无法连接,提示 ERROR 1045 (28000): Access denied for user ’root’@’localhost’ (using passw ...

  4. 给破坏性的Rake任务加把锁 | Rails

    抄自这里 直接贴代码 # lib/tasks/skip_prod.rake desc 'Raises exception if used in production' task skip_prod: ...

  5. float、定位、inline-block、兼容性需注意的特性总结

    inline-block 特性: 1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题)[相当字体大小的一半] 5.ie6 ie7不支持块属性标签的inline ...

  6. Python的第一天

    一.Python的简介 Python诞生于作者是Guido van Rossum,Python来自Guido所挚爱的电视剧Monty Python's Flying Circus (BBC1960-1 ...

  7. Stream 同步错误之解决方案 ORA-00001 ORA-26787 ORA-26786

    stream是 oracle 11g  支持的数据同步技术, 虽然该技术已经不是什么新技术, 但目前国内采用该技术开发的软件不多见. stream 同步软件项目参与近一年, 近期软件上线实施, 效果不 ...

  8. 【原】灵活运用sessionStorage或者localStorage

    有时,一个app中,后台并没有提供页面中对应的信息接口,需要前端在页面跳转时把某些信息带入下一个页面,一般想到用url后带参数的方法,但是有时需要带的参数过长,就不适合用这个方法了,所以用sessio ...

  9. 自己写的基于bootstrap风格的弹框插件

    自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...

  10. Framework4.5语法糖 异步Task

    1.线程安全 在使用TaskRun的时候需要注意线程安全的问题. 线程安全通常是由全局变量及静态变量引起的,如果是值类型就不存在这样的隐患,如果是引用类型用不好就会导致线程不安全! 2.Task.Ta ...