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

第一种方法：左边的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. php://input

    从官网信息来看,php://input是一个只读信息流,当请求方式是post的,并且enctype不等于"multipart/form-data"时,可以使用php://input ...

  2. 委托、回调 Lambda表达式书写方式

  3. 交换ctrl和caps_loack的新方法

    交换ctrl和caps_loack的新方法 Table of Contents 1 过程 1 过程 debian用了几年,由于emacs的关系,一直将右ctrl和caps_lock键交换,使用的是xm ...

  4. Lab_6_SysOps_AutoScaling_Linux_v2.5

    System Operations - Lab 6: Using Amazon Elastic Load Balancer (Linux) - 2.5 ======================== ...

  5. Activity Intent Flags及Task相关属性

    转自http://www.cnblogs.com/lwbqqyumidi/p/3775479.html 今天我们来讲一下Activity的task相关内容. 上次我们讲到Activity的四种启动模式 ...

  6. 转：面试题：“你能不能谈谈，java GC是在什么时候，对什么东西，做了什么事情？”

    转自:http://jeromecen1021.blog.163.com/blog/static/18851527120117274624888/ 面试题目: 地球人都知道,Java有个东西叫垃圾收集 ...

  7. 【学】React的学习之旅5-组件的嵌套

    复习 [array].map(function(item,index){})方法,传参里的函数需要有return值,一般用map()后都要用一个变量接一下,这个返回的还是一个数组,只是把每次遍历到的数 ...

  8. Node.js基础与实战

    Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...

  9. Kafka深度解析，众人推荐，精彩好文！

    作者: Jason Guo 背景介绍 Kafka简介 Kafka是一种分布式的,基于发布/订阅的消息系统.主要设计目标如下: 以时间复杂度为O(1)的方式提供消息持久化能力,并保证即使对TB级以上数据 ...

  10. JE22环境安装配置（JDK/ANT/TOMCAT/ECLIPSE）

    文章中不涉及安装的均为解压即可直接使用的 1.安装JDK最新的J2EE安装会默认安装GlassFish,安装Java SDK就足够了,不是非要装JavaEE SDK,因为Tomcat的lib目录下,已 ...