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 ...
随机推荐
- Java equals() 和hashCode()方法详解
Java的Object类中定义了equals方法,Object类中的equals方法源代码如下,从源代码中可以看出Object类中的equals方法是用来返回判断两个对象是否指向同一个对象(引用地址) ...
- Docker基础知识整理
Docker 1.安装2.三大组件 镜像/容器/仓库3.Docker数据管理4.构建Docker5.docker部署微服务 项目部署到Linux服务器 1.安装jdk2.安装tomcat3.将项目wa ...
- OCR技术浅探：基于深度学习和语言模型的印刷文字OCR系统
作者: 苏剑林 系列博文: 科学空间 OCR技术浅探:1. 全文简述 OCR技术浅探:2. 背景与假设 OCR技术浅探:3. 特征提取(1) OCR技术浅探:3. 特征提取(2) OCR技术浅探:4. ...
- modal verbs（一）
什么是modal verb?翻译成中文就是情态动词. modal的意思是模式的,情态的,形式的.Bootstrap中的模态框就是这个词modal. 情态动词翻译挺准确的,就是表达说话人的情绪,态度或语 ...
- Tomcat8配置tomcat-users.xml配置
默认tomcat-user.xml中的角色和用户配置示例如下: <!-- <role rolename="tomcat"/> <role rolename ...
- 大数据 --> 一致性Hash算法
一致性Hash算法 一致性Hash算法(Consistent Hash)
- js和jquery实现显示隐藏
(选择的重要性) 当点击同一个按钮的时候实现显示影藏 <a id="link" class="b-btn-four task-resolve add-sub-tas ...
- selenium2自动化测试学习笔记（五）-参数化编程，自动登陆网易QQ邮箱
学习python下使用selenium2自动测试第6天,参数化编程这节课花了两天时间. 本次编程主要时间是花在熟悉python上 知识点or坑点: 1.读取txt.xml.csv等文件存储的账号.密码 ...
- 阿里聚安全·安全周刊】一种秘密窃取数据的新型 Android 木马|iOS 11相机惊现BUG
本周的七个关键词: 新型 Android 木马丨 TLS 1.3 丨 阿里安全图灵实验室 丨 漏洞感染 Linux 服务器 丨 CPU曝极危漏洞 丨 iOS 11相机BUG 丨R2D2技术 - ...
- 敏捷开发每日报告--day5
1 团队介绍 团队组成: PM:齐爽爽(258) 小组成员:马帅(248),何健(267),蔡凯峰(285) Git链接:https://github.com/WHUSE2017/C-team 2 ...