css回顾之左侧宽度自适应布局
目标：
<!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回顾之左侧宽度自适应布局的更多相关文章
- [转]css实现左侧宽度自适应，右侧固定宽度
原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度 ...
- BFC之宽度自适应布局篇
说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应 ...
- table-cell实现宽度自适应布局
利用table-cell可以实现宽度自适应布局. table-cell有一些比较好用的属性,比如垂直居中,自适应高度宽度等,为元素设置table-cell布局之后,元素的margin失效,paddin ...
- 老生长谈：css实现右侧固定宽度，左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
- 老生长谈，温故知新：css实现右侧固定宽度，左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
- css实现右侧固定宽度，左侧宽度自适应
https://blog.csdn.net/qq_22889599/article/details/78414040 反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽 ...
- 在页面布局中，CSS如何实现左侧宽度固定，右侧宽度自适应的布局？
首先给出DOM结构 <divclass="box"> <divclass="box-left"></div> <div ...
- 同一行多个div宽度自适应布局
主要运用到的是:布局神器display:table-cell 元素两端对齐 第一个案例是让两个元素分别向左和向右对齐,如果是过去,我一定会用float来实现,但其实用table可以这么做: 自动平均划 ...
- CSS实现高度和宽度自适应
其实用绝对定位也可以实现高度和宽度的自适应,从而出现自适应大小的区域及滚动条. <%@ Page Language="C#" AutoEventWireup="tr ...
随机推荐
- oracle空间索引
1.索引创建 添加元数据 INSERT INTO USER_SDO_GEOM_METADATA (TABLE_NAME, COLUMN_NAME, DIMINFO, SRID) VALUES ('BE ...
- mac下redis安装、设置、启动停止
下载安装 需要下载release版本,下载地址: http://download.redis.io/releases/ 我这里下载的是: http://download.redis.io/releas ...
- cesium 热力图
- 文本编辑工具vim
前面多次提到过vim这个东西,它是linux中必不可少的一个工具.没有它很多工作都无法完成.早期的Unix都是使用的vi作为系统默认的编辑器的.你也许会有疑问,vi与vim有什么区别?可以这样简单理解 ...
- Angular.js学习范例及笔记
一.AngularJs 1.row in order.rows <ng-bind="row.name"> 2.ng-form <form action=" ...
- 自动识别移动端还是PC端
平时在开发中经常会遇到这样的需求,除了开发PC端之外,还会同时开发移动端.对于简单的页面,可以使用bootstrap之类的框架实现响应式页面,可是当页面很复杂的时候,就需要开发一个移动端页面,一个PC ...
- 设计模式 --> （11）桥接模式
桥接模式 将抽象部分与它的实现部分分离,使它们都可以独立地变化. 适用性: 1.当一个对象有多个变化因素的时候,考虑依赖于抽象的实现,而不是具体的实现.如上面例子中手机品牌有2种变化因素,一个是品牌, ...
- 常见的链表排序（Java版）
上篇博客中讲解了九大内部排序算法,部分算法还提供了代码实现,但是那些代码实现都是基于数组进行排序的,本篇博客就以链表排序实现几种常见的排序算法,以飨读者. 快速排序的链表实现 算法思想:对于一个链表, ...
- Lucene 4.4.0中常用的几个分词器
一.WhitespaceAnalyzer 以空格作为切词标准,不对语汇单元进行其他规范化处理.很明显这个实用英文,单词之间用空格. 二.SimpleAnalyzer 以非字母符来分割文本信息,并将语汇 ...
- Java多线程：Callable,Future,FutureTask
一.Future Future和Callable基本是成对出现的,Callable负责产生结果,Future负责获取结果. 1.Callable接口类似于Runnable,只是Runnable ...