目标：

![屏幕快照 2018-03-13 上午11.36.06](http://ozfuwp2os.bkt.clouddn.com/屏幕快照 2018-03-13 上午11.36.06.png)

<!DOCTYPE html>

<meta charset=utf-8>

<html>

<head>

    <title>alibaba</title>

    <style type="text/css">

        .main{

            margin: 5px;

            overflow: hidden;

/*          border: 1px solid #000;*/

        }

        .column{

            border: 1px solid #000;

        }

        .left{

            float: left;

            width: 100%;

        }

        .right{

            float: left;

            width: 200px;

            margin-left: -204px;

        }

        .real{

            margin-right: 210px;

            border: 1px solid blue;

            height: 300px;

        }

    </style>

</head>

<body>

    <div class="main">

        <div class="left column">

            <div class="real">content - 自适应宽度</div>

        </div>

        <dis class="right column">aside - 定宽200px</div>

    </div>

</body>

</html>

第一步：两个div设置固定高度，右边的设置固定宽度，并且都float:left;

第二步：右边的div设置固margin-right，让它能和左边的div并排显示；

第三步：在左边的div中再添加一个小div#real，由它来撑开div#left 设置margin-right,值为div#right的宽

主要思想——借鉴双飞翼布局！

css回顾之左侧宽度自适应布局的更多相关文章

  1. [转]css实现左侧宽度自适应，右侧固定宽度

    原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度 ...

  2. BFC之宽度自适应布局篇

    说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应 ...

  3. table-cell实现宽度自适应布局

    利用table-cell可以实现宽度自适应布局. table-cell有一些比较好用的属性,比如垂直居中,自适应高度宽度等,为元素设置table-cell布局之后,元素的margin失效,paddin ...

  4. 老生长谈：css实现右侧固定宽度，左侧宽度自适应

    反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...

  5. 老生长谈，温故知新：css实现右侧固定宽度，左侧宽度自适应

    反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...

  6. css实现右侧固定宽度，左侧宽度自适应

    https://blog.csdn.net/qq_22889599/article/details/78414040 反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽 ...

  7. 在页面布局中，CSS如何实现左侧宽度固定，右侧宽度自适应的布局？

    首先给出DOM结构 <divclass="box"> <divclass="box-left"></div> <div ...

  8. 同一行多个div宽度自适应布局

    主要运用到的是:布局神器display:table-cell 元素两端对齐 第一个案例是让两个元素分别向左和向右对齐,如果是过去,我一定会用float来实现,但其实用table可以这么做: 自动平均划 ...

  9. CSS实现高度和宽度自适应

    其实用绝对定位也可以实现高度和宽度的自适应,从而出现自适应大小的区域及滚动条. <%@ Page Language="C#" AutoEventWireup="tr ...

随机推荐

  1. VLOOKUP函数常用套路大全

    今天和大家来说说VLOOKUP的那些事儿,深入了解一下VLOOKUP函数的各种用法,看看这位大众情人还藏着多少不为人知的秘密.函数的语法为:VLOOKUP(要找谁,在哪儿找,返回第几列的内容,精确找还 ...

  2. 忘记root密码---单用户模式进入及操作

    修改root密码----------------单用户模式操作 个人原创博客,转载请注明,否则追究法律责任 1,开机后,迅速按下任意键 2,选择第二个:内核,按e 3,在quient后面按空格 1 或 ...

  3. 一场IPFS引领下的共享之风正在走向区块链

    中国互联网的高速发展 已经接近10年,小编完整的经历这个过程.这一切我们从一个小网站 饭否 说起... 互联网 2006年3月16:Twitter上线 2007年5月12:  饭否上线 饭否是中国第一 ...

  4. ASP.NET MVC编程——控制器

    每一个请求都会经过控制器处理,控制器中的每个方法被称为控制器操作,它处理具体的请求. 1操作输入参数 控制器的操作的输入参数可以是内置类型也可以是自定义类型. 2操作返回结果 结果类型 调用方法 备注 ...

  5. 使用mescroll来实现移动端页面上拉刷新， 下拉加载更多功能

    * mescroll请参考官方文档 1. 使用mescroll实现下拉滑动的效果: (仅仅效果, 有的页面不需要刷新数据, 只要你能下拉就行) 代码如下: var mescroll = new MeS ...

  6. angularJs模块ui-router之状态嵌套和视图嵌套

    原文地址:http://bubkoo.com/2014/01/01/angular/ui-router/guide/nested-states%20&%20nested-views/ 状态嵌套 ...

  7. Jmeter4.0----安装教程（2）

    1.检查安装环境 1.1 JDK要求 JDK版本:1.6 + 1.2 检查是否安装JDK win + R 快捷键打开运行,输入 cmd 打开面板,在面板中输入 java -version,出现如下信息 ...

  8. Algorithm --> 十大排序算法

    十大排序算法 主要排序法有:  一.冒泡( Bubble)排序—— 相邻交换  二.选择排序 ——每次最小/ 大排在相应的位置  三.插入排序 ——将下一个插入已排好的序列中  四.壳( Shell) ...

  9. java开发常用技术

    基础部分 1. 线程和进程的区别 线程三个基本状态:就绪.执行.阻塞 线程五个基本操作:创建.就绪.运行.阻塞.终止 进程四种形式:主从式.会话式.消息或邮箱机制.共享存储区方式 进程是具有一定功能的 ...

  10. hostPath Volume - 每天5分钟玩转 Docker 容器技术（148）

    hostPath Volume 的作用是将 Docker Host 文件系统中已经存在的目录 mount 给 Pod 的容器.大部分应用都不会使用 hostPath Volume,因为这实际上增加了 ...