margin 等高布局
<div id="main">
<div id="left">
我是左边的内容的啦啦啦啦。。。 。<br>
我是左边的内容的啦啦啦啦。。。。<br>
我是左边的内容的啦啦啦啦。。。。 <br>
我是左边的内容的啦啦啦啦。 。 。。<br>
我是左边的内容的啦啦啦啦。。。 。<br>
</div>
<div id="right">
左边的内容...哈哈哈哈哈
</div>
</div> <style>
#main{
overflow:hidden;
width:500px;
margin:0 auto;
}
#left{
float:left;
width:390px;
background:#eee;
}
#right{
float:right;
width:100px;
background:#ccc;
}
#left,#right{
margin-bottom:-1000px;
padding-bottom:1000px;
}
</style>
overflow:hidden;
margin-bottom:-1000px;
padding-bottom:1000px;
很巧妙的利用了 margin 做到了等高布局。。仅仅是一个看起来的。实际上高度不相等的。
仅仅是隐藏了超出的部分
margin 等高布局的更多相关文章
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- CSS等高布局的6种方式
× 目录 [1]边框模拟 [2]负margin [3]table[4]absolute[5]flex[6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等 ...
- div两栏等高布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- css圣杯布局、等高布局
所谓圣杯布局,就是自适应浏览器的分辨率,也称双飞翼布局. 例子: <style> body{margin:0;} .center{height:600px;background:#f60; ...
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- 模拟表格 inline-block等高布局
表格是个好东西,它可以自动根据内容来调整格子,确保数据正常显示,并且不破坏表格的结构.但也有一些劣势,因为是用大量标签堆砌而成,页面结构会比较乱,细节也往往不容易控制.所以我们希望有表格的展示效果,但 ...
- css设置多列等高布局
初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...
- 如何用css实现"等高布局"。
有时候为了让网页实现美观,在不知道高度的情况下,我们要用css实现等高布局效果,传统的方法, 我们可以用javascript实现,但是由于需求决定或者其他的情况下,我们只能用css实现,其方法主要是采 ...
- CSS等高布局的7种方式
前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高.本文将介绍边框模拟.负margin这两种伪等高以及tabl ...
随机推荐
- HDU 472 Hamming Distance (随机数)
Hamming Distance Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others) To ...
- SqlServer和Oracle中一些常用的sql语句7 游标
declare db_cursor4 scroll cursor for select * from 供应商 --声明游标 open db_cursor4 --打开游标 fetch first fro ...
- MYSQL获取自增主键【4种方法】
通常我们在应用中对mysql执行了insert操作后,需要获取插入记录的自增主键.本文将介绍java环境下的4种方法获取insert后的记录主键auto_increment的值: 通过JDBC2.0提 ...
- notepad++ 配置笔记
0.notepad++简单介绍 Notepad++是一套很有特色的自由软件的纯文字编辑器,有完整的中文化接口及支援多国语言撰写的功能.它的功能比 Windows 中的 Notepad更强大.Notep ...
- android ble蓝牙开发略解
Android 蓝牙4.0开发 1. 权限和相关属性 “android:required="true"表示apk只有在具有bluetooth_le属性的系统里运行,这个4.3之前 ...
- 升级版:深入浅出Hadoop实战开发(云存储、MapReduce、HBase实战微博、Hive应用、Storm应用)
Hadoop是一个分布式系统基础架构,由Apache基金会开发.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力高速运算和存储.Hadoop实现了一个分布式文件系 ...
- mac下进行配置android真机调试环境
学习android开发几天了,今天好不容易找了个android手机,直接连接mac电脑,结果eclipse-DDMS里面没有显示任何设备. 使用命令行adb devices 试了下,没设备列表. 郁闷 ...
- Unity3D手游-横版ACT游戏完整源代码下载
说明: 这不是武林.这不是江湖,没有道不完的恩怨,没有斩不断的情仇,更没有理不清的烦恼,这是剑的世界,一代剑魁闯入未知世界,将会为这个世界展开什么样的蓝图.让你来创造它的未来,剑魁道天下,一剑斗烛龙! ...
- Android控件拖动的实现
这个也是从网上得到的代码,例子比较简单,但是如果有需要此功能的,这个例子可以提供很多提示,首先,给个截图 这个是拖动以后的效果,一个imageview和一个button控件,提供两份代码下载吧,一份是 ...
- FFMPEG H264/H265 编码延迟问题
最新使用FFmpeg进行H264的编码时,发现视频编码有延迟,不是实时编码.进过一番研究发现,仅仅要在调用avcodec_open2函数 打开编码器时,设置AVDictionary參数就可以.关键代码 ...