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. 停止复制代理后AWT缓存组的行为

    AWT缓存组中尽管大多数时候数据是从TimesTen到Oracle,但也存在数据从Oracle到TimesTen的情形. 数据从TimesTen下沉到Oracle依靠复制代理,数据从Oracle到Ti ...

  2. cocos2d-x的声音控制

    声音控制SimpleAudioEngine是单例.下面是其方法. [cpp] view plaincopy //获得SimpleAudioEngine的实例 static SimpleAudioEng ...

  3. elasticsearch index 之 create index（-）

    从本篇开始,就进入了Index的核心代码部分.这里首先分析一下索引的创建过程.elasticsearch中的索引是多个分片的集合,它只是逻辑上的索引,并不具备实际的索引功能,所有对数据的操作最终还是由 ...

  4. VS Code 终端显示问题

    一.打开编辑器的终端时候,然后弹出了系统自带的cmd窗口 解决办法: Win+R 输入cmd 打开windows cmd窗口,窗口顶部右键属性,然后取消勾选使用旧版控制台,然后重启编辑器就行了. 二. ...

  5. Knockout 重新绑定注意要点

    function ReImport(id) { //点击按钮时调用函数名称, var node = document.getElementById('bindingNode'); //bindingN ...

  6. Mybatis 一对多 多对1

    http://blog.csdn.net/z69183787/article/details/46833565 http://blog.csdn.net/rain097790/article/deta ...

  7. 牛客网剑指offer刷题总结

    二维数组中的查找: 题目描述:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 两 ...

  8. hdu 1003 Max Sum 最大字段和 dp

    今天看了一上午dp.看不太懂啊.dp确实不简单.今天開始学习dp,搜了杭电的dp46道,慢慢来吧.白书上的写的 又不太具体,先写几道题目再说. .. 题目连接:id=516&page=1&qu ...

  9. JXL.jar简单封装Excel读写操作

    1.分析 一个excel文件能够有多页,每页excel中能够有多行,每行中能够有多列.用面向对象的思想能够把一行中的某列看作是一个String对象,一行看作是一个包括多个列的对象.一页是包括多行的对面 ...

  10. C#截取指定长度中英文字符串方法 (修改)

    public static string GetFirstString(string stringToSub, int length) { Regex regex = new Regex(" ...