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. 59.node的serve-favicon中间件的使用

    转自:https://www.zhi-jie.net/node-serve-favicon-use/ 有一个名称为serve-favicon的中间件,可以用于请求网页的favicon图标.譬如如下的使 ...

  2. Fragment-管理Fragment1

    前面给大家稍微看了要怎么使用fragment,在上篇中,我们也初步接触到了add,replace这些fragment操作的函数,下面就再详细讲讲如何管理Fragment页面吧. 一.概述 1.Frag ...

  3. 2017国家集训队作业[agc004f]Namori

    2017国家集训队作业[agc004f]Namori 题意: 给你一颗树或环套树,树上有\(N\)个点,有\(M\)条边.一开始,树上的点都是白色,一次操作可以选择一条端点颜色相同的边,使它的端点颜色 ...

  4. touch---创建文件或更改文件日期

  5. 调用中行接口针对返回报文（xml形式）做相关处理

    最近在对接中行银行接口,在获取返回报文的时候遇到一些问题,现在在这里做个总结 TIP: 在返回报文之前,要对前置机的URL请求,在这期间遇到一个坑,还是通过查看日志才发现问题 在填写转账信息的时候要求 ...

  6. VFS相关内容

    http://blog.csdn.net/icyfire0105/article/details/1899927 VFS是一个软件层,用来处理与Unix标准文件系统相关的所有系统调用,是用户应用程序与 ...

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

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

  8. 源代码看CoordinatorLayout.Behavior原理

    在上一篇博客CoordinatorLayout高级使用方法-自己定义Behavior中,我们介绍了怎样去自己定义一个CoordinatorLayout的Behavior.通过文章也能够看出Behavi ...

  9. samba-设定文件共享

    家里有两台电脑,一台装的是window,一台装的是ubuntu.一直想要实现两台电脑资源共享,今天终于成功实现了. smaba 具体简介就不说了,反正就知道,它可以创建一个服务器,然后让其他的电脑共享 ...

  10. 1.java soap api操作和发送soap消息

    转自:https://blog.csdn.net/lbinzhang/article/details/84721359 1. /** * soap请求 * * @return * @throws Ex ...