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

第一种方法：左边的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. UIWebView的使用

    iOS中UIWebView的使用详解 一.初始化与三种加载方式 UIWebView继承与UIView,因此,其初始化方法和一般的view一样,通过alloc和init进行初始化,其加载数据的方式有三种 ...

  2. [Linux] - CentOS 安装nginx

    linux版本:CentOS 6.0+ 安装nginx方法: 1.下载nginx rpm包命令: wget http://nginx.org/packages/centos/6/noarch/RPMS ...

  3. docker网络配置方法总结

    docker启动时,会在宿主主机上创建一个名为docker0的虚拟网络接口,默认选择172.17.42.1/16,一个16位的子网掩码给容器提供了65534个IP地址.docker0只是一个在绑定到这 ...

  4. nodejs+sequelize操作mysql数据库

    前言: 本人对mysql不是很熟悉,只会命令行的简单增删改查.有些观点可能不到位请谅解. sequelize是针对node.js和io.js开发的基于ORM的框架,它支持的数据库包括:PostgreS ...

  5. 在VBA中使用Windows API

    VBA是一种强大的编程语言,可用于自定义Microsoft Office解决方案.通过使用VBA处理一个或多个Office应用程序对象模型,可以容易地修改Office应用程序的功能或者能够使两个或多个 ...

  6. C#动手实践：Kinect V2 开发（1）：初步了解及环境搭建

    该分享使用的是Kinect 二代,C#做为编程语言,请知悉 Kinect是微软在2009年6月2日的E3游戏展上,正式公布的XBOX360体感周边外设.它是一种3D体感摄影机,同时它导入了即时动态捕捉 ...

  7. Unity关于一个UGUI优化效率的方法

    无意间发现了一个小技巧.如下图所示,可以发现UGUI的Image组件的RaycastTarget勾选以后会消耗一些效率,为了节省效率就不要勾选它了,不仅Image组件Text组件也有这样的问题. 一般 ...

  8. java安全沙箱（三）之内置于Java虚拟机（及语言）的安全特性

    java是一种类型安全的语言,它有四类称为安全沙箱机制的安全机制来保证语言的安全性,这四类安全沙箱分别是: 类加载体系 .class文件检验器 内置于Java虚拟机(及语言)的安全特性 安全管理器及J ...

  9. java安全沙箱（一）之ClassLoader双亲委派机制

    java是一种类型安全的语言,它有四类称为安全沙箱机制的安全机制来保证语言的安全性,这四类安全沙箱分别是: 类加载体系 .class文件检验器 内置于Java虚拟机(及语言)的安全特性 安全管理器及J ...

  10. UIScrollView 性能优化 - view转为Image

    进入做地图闹钟app,图层关系是这样的: subwayView 上先绘制线路上各个元素:线条 ,站点名称-Label,站点位置(画圆圈表示)-View.shapeLayer UIBezierPath ...