目标:

![屏幕快照 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. 在Editplus中配置java的(带包)编译(javac)和运行(java)的方法

    配置的前提是电脑安装了JDK并且配置好了相关的环境变量(JAVA_HOME,path和classpath). 配置好后在命令行中输入javac和java验证是否配置成功: 如果出现上面的情况则说明配置 ...

  2. [Oracle] UNIX与Windows 2000上Oracle的差异(III)

    作者:Ian Adam & David Stien, SAIC Ltd 日期:19-Dec-2003 出处:http://www.dbanotes.net翻译:Fenng ORACLE 的安装 ...

  3. Linux-CentOS7下安装mysql5.6常见问题解决!

    第一次写博客,写的不好请大家多见谅!有遇到问题可以评论到下方,我会抽空帮大家解决!! 下载MySQL-5.6.tar安装包(包含server,client等) 首先用root用户将MySQL-5.6. ...

  4. python学习03-数据类型

    一.基本数据类型--数字 布尔型 bool型只有两个值:True和False 之所以将bool值归类为数字,是因为我们也习惯用1表示True,0表示False. 以下是布尔值是False的各种情况: ...

  5. js中的Hook

    1. 简单理解: hook(钩子)就是: 把将要执行的的函数或者一系列动作注册到一个统一的接口下面, 当应用程序调用此接口(即hook)时,就等于调用了这一系列动作.

  6. java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListene解决办法

    照着以前写的项目搭一个框架,项目用到的是ssm,spring+spring mvc+mybatis,由Eclipse转战IDEA上,项目的文件夹有一些改变,在之前的小项目中喜欢把lib文件夹放在项目根 ...

  7. spring boot高性能实现二维码扫码登录(上)——单服务器版

    前言 目前网页的主流登录方式是通过手机扫码二维码登录.我看了网上很多关于扫码登录博客后,发现基本思路大致是:打开网页,生成uuid,然后长连接请求后端并等待登录认证相应结果,而后端每个几百毫秒会循环查 ...

  8. iOS之SQLite使用详解

    #pragma mark - 1.引入<sqlite3.h>头文件//添加libsqlite3.0.tbd#import <sqlite3.h>static sqlite3 * ...

  9. 走进webpack(3)-- 小结

    写这一系列的文章,本意是想要梳理一下自己凌乱的webpack知识,只是使用过vue-cli,修改过其中的一部分代码,但是对于一个简单项目从0开始搭建webpack的流程和其中的依赖并不是十分清楚.所以 ...

  10. RDD概念、特性、缓存策略与容错

    一.RDD概念与特性 1. RDD的概念 RDD(Resilient Distributed Dataset),是指弹性分布式数据集.数据集:Spark中的编程是基于RDD的,将原始数据加载到内存变成 ...