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 ...
随机推荐
- Selenium学习资源和网站
用于收集常用的网站和学习资源: 文章: Selenium私房菜系列--总章 WEB 自动化测试工具 Selenium 简介及其应用 Selenium教程 和我一起学 Selenium WebDrive ...
- postgresql数据操作
windows下操作postgresql 删除数据库:dropdb.exe -U postgres 数据库名称 创建数据库createdb.exe -U postgres lilei_db1--lil ...
- wpf动态增加删除控件
我在xaml中定义了一个名字为morepictureWrapPan为WrapPanel,然后将控件添加在此WrapPanel中.由于要实现控件的删除功能,所以增加的textbox和button的名字都 ...
- jsp的两种跳转方式和区别
1.forward跳转: 服务器端跳转,地址栏不改变: 执行到跳转语句后马上无条件跳转,之后的代码不再执行(跳转之前一定要释放全部资源): request设置的属性在跳转后的页面仍可以使用: 使用&l ...
- JavaSE语法基础(3)---函数、数组
JavaSE语法基础(3)---函数.数组 函数的概念:实现特定功能的一段代码,可反复使用. 函数的出现减少代码冗余,提高代码的复用性,可读性,可维护性,可以使每个功能模块独立起来,方便分工合作. 函 ...
- GPS服务端（上）-Socket服务端(golang)
从第一次写GPS的服务端到现在,已经过去了八年时光.一直是用.net修修改改,从自己写的socket服务,到suppersocket,都是勉强在坚持着,没有真正的稳定过. 最近一段时间,服务端又出了两 ...
- MYSQL数据库学习十七 日志管理
17.1 MySQL软件所支持的日志 MySQL所支持的日志文件里,除了二进制日志文件外,其他日志文件都是文本文件.默认情况下,MySQL只会启动错误日志文件,其他日志文件则需要手动启动. 二进制日志 ...
- linux --> 获取进程执行时间
获取进程执行时间 一.时间概念 在linux下进行编程时,可能会涉及度量进程的执行时间.linux下进程的时间值分三种: 时钟时间(real time):指进程从开始执行到结束,实际执行的时间. 用户 ...
- java设计模式------工厂设计模式
总结 以上就是工厂模式的基本实现和详细说明.包括了简单工厂模式.工厂方法模式.抽象工厂模式.我们可以基于需求来选择合适的工厂模式 基本概念:为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来 ...
- bug终结者 团队作业第八周
bug终结者 团队作业第八周 本次任务 素材提供及编辑:20162328 蔡文琛 博客修改完善:20162322 朱娅霖 "bug终结者" 宏伟蓝图 UML 手绘底稿 用例图 选项 ...