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. RTSP、HTTP、HTTPS、SDP四种协议详解

    我们将主要讲解RTSP,HTTP,HTTPS, SDP四种协议.  一:RTSP协议简介 实时流协议RTSP是一个应用层协议,用于控制具有实时特性的数据(例如多媒体流)的传送. RTSP协议一般与RT ...

  2. POJ 3049 DFS

    思路:暴搜 //By SiriusRen #include <cstdio> #include <iostream> #include <algorithm> us ...

  3. Elasticsearch之shield（权限）插件安装之后的浏览详解

    前期博客 Elasticsearch-2.4.3的3节点安装(多种方式图文详解)(含 head.kopf.marvel.shield和watcher插件安装和使用) 访问es:-u es_admin ...

  4. readonly&&declare&&unset &&export&&env环境变量

    readonly命令用于定义只读shell变量和shell函数.readonly命令的选项-p可以输出显示系统中所有定义的只读变量. 选项 -f:定义只读函数: -a:定义只读数组变量: -p:显示系 ...

  5. python 数字计算模块 decimal（小数计算）

    from decimal import * a = Decimal('0.1')+Decimal('0.1')+Decimal('0.1')+Decimal('0.3') float(a) >& ...

  6. IntelliJ IDEA基于maven构建的web项目找不到jar包

    基于maven构建的springMVC项目,下载好jar包import后,运行提示ClassNotFoundException: java.lang.ClassNotFoundException: o ...

  7. SpringMVC &amp; Struts2

    这两个框架可谓Java中的经典,Java开发必懂的框架,这两天在面试中又问道两者的异同.这里简单做了整理供大家參考交流. 概念:

  8. struts2中action手动获取參数

    struts2中action手动获取Session,jsp页面參数 1. ActionContext 在Struts2开发中,除了将请求參数自己主动设置到Action的字段中,我们往往也须要在Acti ...

  9. js ---- 实现千位分隔符

    第一种方法: var num = 1234567; var string = num.toString(); var arr = string.split('').reverse(); console ...

  10. 63.当当网txt数据按行切割与合并

    获取文件有多少行 //获取文件有多少行 int getN(char *path) { FILE *pf = fopen(path, "r"); if (pf==NULL) { ; ...