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. Eclipse怎么导入外来项目

    从File中点击------>import----->General------>然后按下面的图片显示

  2. ajax模仿iframe

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Android 通过OnScrollListener来监听RecyclerView的位置

    最近做一个漫画app,在阅读漫画界面需要通过获取recyclerView的位置来实时更新界面上的图片进度(比如1/9), 查阅资料得知了可以通过LayoutManager来获取recyclerView ...

  4. web知识—协议

    web使用超文本传输协议(HTTP,HyperText Transfer Protocol)进行通信.http在1990年左右出现,现在有0.9/1.0/1.1三个版本.在早期的互联网中的一些协议只能 ...

  5. ubuntu mysql 无法启动 简单排查

    自己的站点非常久没有去上了,想打开发现竟然打不开了.所以就找了一系列的原因. vps不行了 dns解析出问题了 域名出问题了 简单排查之后,我的vps服务商用的是 ***(bandwagonhost) ...

  6. hdu1874 畅通project续 最短路 floyd或dijkstra或spfa

    Problem Description 某省自从实行了非常多年的畅通project计划后.最终修建了非常多路.只是路多了也不好,每次要从一个城镇到还有一个城镇时,都有很多种道路方案能够选择.而某些方案 ...

  7. 热点共享SS网络

    # 测试系统: Ubuntu 16.04 LTS-lxde-ARM # ***-libev 安装脚本源于 秋水逸冰: https://teddysun.com/358.html # ss-tproxy ...

  8. stm32与arm7比较(经典)

    http://wenku.baidu.com/link?url=LIVcT1AQL0IgVF1xan5Zy9rXarCBo66hj7OXSxM1ap7FpssO4c3sd1pZd8azfBPr3PBy ...

  9. JAVA 多线程和进程概念的引入

    1.并发和并行 并行:指两个或多个时间在同一时刻发生(同时发生): 并发:指两个或多个事件在一个时间段内发生. 在操作系统中,安装了多个程序,并发指的是在一段时间内宏观上有多个程序同时运行,这在单 C ...

  10. 洛谷 P2978 [USACO10JAN]下午茶时间Tea Time

    P2978 [USACO10JAN]下午茶时间Tea Time 题目描述 N (1 <= N <= 1000) cows, conveniently numbered 1..N all a ...