1.左侧绝对定位法

直接看代码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>CSS两列布局——第一种方法</title>

  <style>

    .left {

      position: absolute;

      height: 500px;

      width: 300px;

      background: #333;

      color: #ccc;

    }

    .right {

      height: 500px;

      background: #ddd;

      margin-left: 300px;

    }

  </style>

</head>

<body>

  <div class="left">

    左侧设置绝对定位

  </div>

  <div class="right">

    右侧左边距margin-left设为左侧的宽度，这是关键

  </div>

</body>

</html>

效果如下：

关键点在于.left的position:absolute和.right的margin-left:300px;

2.左侧浮动法（右侧不浮动）

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>CSS两列布局——第二种方法</title>

  <style>

    .left {

      float: left;

      height: 500px;

      width: 300px;

      background: #333;

      color: #ccc;

    }

    .right {

      overflow: auto;

      height: 500px;

      background: #ddd;

    }

  </style>

</head>

<body>

  <div class="left">

    左侧设置左浮动

  </div>

  <div class="right">

    右侧设置overflow:auto

  </div>

</body>

</html>

效果如下：

关键点：左侧设置左浮动，右侧设置overflow:auto，我也不知道为什么这样就有效，以后知道了来补充。

3.Flex布局法（建议移动端页面使用）

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>CSS两列布局——第三种方法，flex布局</title>

  <style>

    .wrapper {

      display: flex;

    }

    .left {

      flex: 0 0 25%;

      width: 25%;

      height: 500px;

      background: #333;

      color: #ccc;

    }

    .right {

      flex: 1;

      height: 500px;

      background: #ddd;

    }

  </style>

</head>

<body class="wrapper">

  <div class="left">

    flex子元素：固定宽度，可用百分比

  </div>

  <div class="right">

    flex子元素：宽度不定，但是flex:1,否则它是随内容而撑开。

  </div>

</body>

</html>

效果如下：

参考文章：两列布局——左侧宽度固定，右侧宽度自适应的两种方法

CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法的更多相关文章

  1. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

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

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

  3. CSS 实现：两栏布局（一边固定，一边自适应）

    ☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...

  4. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  5. css两列布局，一边固定宽度，另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

  6. CSS两列布局的多种方式

    两列布局(一侧固定宽度,一侧自适应),在工作中应该是经常使用到,可以说是前端基础了.这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需.这里总 ...

  7. CSS两列布局的N种实现

    一.什么是两列布局 两列布局分为两种,一种是左侧定宽.右侧自适应,另一种是两列都自适应(即左侧宽度由子元素决定,右侧补齐剩余空间).在CSS面试题里面属于常考题,也是一个前端开发工程师必须掌握的技能, ...

  8. css两列布局之基于BFC规则实现

    css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...

  9. CSS 两列布局 之 左侧适应，右侧固定 3种方式

    第一种:左侧用margin-right,右侧float:right CSS代码: html, body,ul,li #wrapper { width: 100%; height: 100%; padd ...

随机推荐

  1. es67

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 1.实用:Google Chrome 键盘快捷键大全

    转自:https://www.cnbeta.com/articles/soft/64070.htm 窗口和标签页快捷方式 Ctrl+N 打开新窗口 按住 Ctrl‎ 键,然后点击链接 在新标签页中打开 ...

  3. html --- rem 媒体查询

    rem是一种相对长度单位,参考的基准是<html>标签定义的font-size. viewport 做移动端的h5,通常会在HTML文件中指定一个<meta>标签: <m ...

  4. BZOJ 2037 区间DP

    跟POJ 3042是一个类型的http://blog.csdn.net/qq_31785871/article/details/52954924 思路: 先排个序 (把初始位置也插进去) f[i][j ...

  5. Elasticsearch之marvel（集群管理、监控）插件安装之后的浏览详解

    前提 Elasticsearch之插件介绍及安装 https://i.cnblogs.com/posts?categoryid=950999&page=2  (强烈建议,从头开始看) 比如,我 ...

  6. BZOJ5332: [Sdoi2018]旧试题(莫比乌斯反演)

    时光匆匆,转眼间又是一年寒暑…… 这是小 Q 同学第二次参加省队选拔赛. 今年,小 Q 痛定思痛,不再冒险偷取试题,而是通过练习旧 试题提升个人实力.可是旧试题太多了,小 Q 没日没夜地做题,却看不到 ...

  7. UVa 11743 - Credit Check

    题目:推断卡号是否合法,给你4组4位的数字.偶数位的2倍的位和加上奇数位的和,推断尾数是否为0. 分析:简单题,模拟. 直接依照提议推断就可以. 说明:460题,加油! #include <io ...

  8. js获取单选button的值

    <!DOCTYPE html> <html> <body> <script type="text/javascript"> func ...

  9. *android抓包工具——fiddler抓包分析api接口

    本文地址:http://blog.csdn.net/u011733020 首先,写这个仅仅是为了学习.不是要做什么违法的事情,假设有问题,有关部门 请联系我,立刻删除. 不要查我水表. 正题:这里介绍 ...

  10. struct数组初始化

    const int MAXN=100; struct A { int a,b; }; struct A arr[100];//此时编译通过 struct A arr[MAXN];//此时编译不通过,原 ...