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 ...
随机推荐
- 原生js移动端滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- Anaconda更新源
国内的网络连接Anaconda的官方源,速度基本为0,大部分时间是连接不上的.国内清华大学有对应的镜像源,可以更改为对应的源. 命令行中运行以下代码即可添加 Anaconda Python 免费仓库: ...
- C# 值类型与引用类型的异同
int,bool,decimal等为值类型 List,Stream等为引用类型 用等号设置一个值类型变量等于另一个变量时,会完成复制,之后这两个变量相互之间没有任何影响: 对引用使用等号时,这两个引用 ...
- WPF介绍
WPF 为Windows Presentation Foundation的首字母缩写 ,中文译为“Windows呈现基础”.WPF是微软新一代图形系统,运行在.NET Framework 3.0及以上 ...
- java语言环境jdk的安装和环境变量的配置
一.jdk的安装 我安装的为64位的1.7.0_17版本的jdk,双击运行,全部默认下一步就行 此处可整改安装目录,然后点击下一步进行安装. 二.环境变量的配置 1.右键点击我的电脑à点击属性,出现如 ...
- vue实现懒加载的几种方法
vue实现惰性加载是基于: 1.ES6的异步机制 components: { comp: (resolve, reject) => {} } 2. webpack的代码分割功能 require. ...
- 16.C++-初探标准库
在别人代码里,经常看到std命名空间,比如使用std命名空间里的标准输入输出流对象cout: #include<iostream> using namespace std; int mai ...
- 深度学习之TensorFlow构建神经网络层
深度学习之TensorFlow构建神经网络层 基本法 深度神经网络是一个多层次的网络模型,包含了:输入层,隐藏层和输出层,其中隐藏层是最重要也是深度最多的,通过TensorFlow,python代码可 ...
- nxlog4go 的配置驱动
刚开始接触log4go项目时,没有注意到配置的重要性. 阅读了log4j.log4net.log4cpp.log4cplus的部分代码,发现它们都是以xml配置来驱动日志系统运行的. 多个源文件共享一 ...
- 利用 mount 指令解决 Read-only file system的问题
利用 mount 指令解决 Read-only file system的问题 在linux系统中创建一个文件提示: /application/report/shiwei # touch test.ct ...