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

第一种方法：左边的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. CentOS 7 ssh脚本 求两个数值的“和”，“乘积”，”商“

    1:在目录下创建一个  sh文件 touch 1.sh 2:进入sh文件书写sh脚本 #!/bin/bash read -p "请输入第一个数值" A read -p " ...

  2. fedora wine qq

    http://blog.lilydjwg.me/2015/10/26/run-tencent-qq-lite-with-wine.186640.html

  3. winform中ComboBox实现text和value，使显示和值分开，重写text和value属性

    winform的ComboBox中只能赋值text,显示和值是一样的,很多时候不能满足根本需要,熟悉B/S开发的coder最常用的就是text和value分开的,而且web下DropDownList本 ...

  4. Delphi写的DLL回调C#

    C#的调用Delphi的DLL没有问题,DLL回调时遇到了麻烦,网上找了个方法,解决了这个问题 Delphi部分,列举了三种回调函数定义 library test; uses SysUtils; {$ ...

  5. Java 和C/C++的“语法”上的差异！

    额其实认为语言语法之间是没有可比性的! 但是因为额曾经学过C/C++,而今又学Java,有赵本山说的话:“知识都学杂了!”,所以我个人总结一下,望提醒自己! Java C++ double 要用%f: ...

  6. C#图像处理

    网站中,对用户图片上传处理是很有必要的.对于一些常用的处理,对图片各种形式的压缩,各种形式的水印. 1.裁剪正方形头像方法 /// <summary> /// 正方型裁剪 /// 以图片中 ...

  7. Python 字符串格式化

    Python 字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存 一 ...

  8. Hibernate5.2关联关系之单向多对一(二)

    Hibernate5.2之单向一对多(二) 一. 简介 在本篇博文中笔者会在上一篇博客的代码基础上进行修改,本篇文章将介绍单向的一对多. 二. hbm文件的方式 Customer.hbm.xml &l ...

  9. 总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。（转）

    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--兼容ie-->< ...

  10. C#如何获取CPU处理器核心数量 z

    有几条不同的处理器信息,您可以获得有关的信息:物理处理器数量.核心数量和逻辑处理器数量,这些可以不同.两颗双核超线程(启用)处理器的机器情况下有:2个物理处理器.4个核心和8个逻辑处理器. 逻辑处理器 ...