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

第一种方法：左边的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. mongoDB之Pipeline Aggregation Stages

    原文链接:https://docs.mongodb.com/manual/reference/operator/aggregation-pipeline/ 管道聚合 $project Reshapes ...

  2. Ubuntu16.04+Tensorlow+caffe+opencv3.1+theano部署

    1.首先安装Ubuntu16.04系统. 2.安装显卡驱动 在官网上下载最新的NVIDIA-Linux-x86_64-375.26.run驱动.然后 Ctrl+Alt+F1进入控制台,输入 sudo ...

  3. C# List 的一些操作 （两List元素是否想同，List是否包含在另一个List中）

    一. 假设有两个List<T>对象 ,List1和List2,如下方法判断两个List是否相等 List1.All(List2.Contains) && List1.Cou ...

  4. day27_面向对象进阶

    飒飒 : . . . . 六.描述符 1 描述符是什么:描述符本质就是一个新式类,在这个新式类中,至少实现了__get__(),__set__(),__delete__()中的一个,这也被称为描述符协 ...

  5. PHP购物车类

    <?php /** * 购物车类 */ session_start(); class Cart{ private static $ins = null; private $items = arr ...

  6. 在.htaccess文件中写RewriteRule无效的问题的解决

    近来在Apache Rewrite 拟静态配置时,遇到个问题.写的如下: RewriteEngine onRewriteRule ^/t_(.*)/$ /test.php?id=$1 保存在httpd ...

  7. CentOS7：搭建SVN ＋ Apache 服务器

    1. 安装httpd 安装httpd服务: $ sudo yum install httpd 检查httpd是否安装成功: $ httpd -version Server version: Apach ...

  8. 【IL】IL生成exe的方法

    1.将ilasm.exe和fusion.dll用everything找出来,然后复制到system32文件夹 2.执行:ilasm /res:code.res code.il /out:code.ex ...

  9. 部署Service Manager 2012遇到的2个问题

    上周装了个Service Manager 2012学习,以便完善System Center整个解决方案,在部署期间遇到2个问题,花了我不少时间解决.一.安装时提示“执行自定义操作时失败”每当到了安装的 ...

  10. Firefox 插件 FlashGot 创建 Axel 下载任务

    运行脚本: #!/bin/sh# FlashGot Command line arguments template: [URL] [COMMENT] [FOLDER]if [ $# = 3 ]; th ...