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 ...
随机推荐
- js和循环依赖
kmdjs和循环依赖 循环依赖是非常必要的,有的程序写着写着就循环依赖了,可以提取出一个对象来共同依赖解决循环依赖,但是有时会破坏程序的逻辑自封闭和高内聚.所以没解决好循环依赖的模块化库.框架.编译器 ...
- hdu1937 Finding Seats
hdu1937 Finding Seats 题意是 求最小的矩形覆盖面积内包含 k 个 空位置 枚举上下边界然后 双端队列 求 最小面积 #include <iostream> #incl ...
- TangoWalk小组课程与优惠(20131208更新) | TangoWalk 学跳阿根廷探戈舞
TangoWalk小组课程与优惠(20131208更新) | TangoWalk 学跳阿根廷探戈舞 TangoWalk小组课程与优惠(20131208更新) Posted by redsky on 2 ...
- 关于wxFileSystemWatcher输出文件名的解决方法
本文针对的wxWidgets版本: 2.9.4, 2.9.5,其他版本未作测试. 如果要使用 wxFileSystemWatcher 并且让其产生的wxFileSystemWatcherEvent 事 ...
- 微信jssdk已无力吐槽
微信强大的整合能力让企业公众号的开发迅速窜红.尤其是企业须要个性化定制的一些功能.公司在同一时候上线的app和触屏版的应用中,微信分享自然是不可或缺的重要一环. 纵观如今大多数的微信公众号.分享大都是 ...
- GDI GDI+ 的区别
GDI+是GDI的下一个版本,它进行了很好的改进,并且易用性更好.GDI的一个好处就是你不必知道任何关于数据怎样在设备上渲染的细节,GDI+更好的实现了这个优点,也就是说,GDI是一个中低层API,你 ...
- 实战ajax
原文:实战ajax 实战ajax Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面. 大家都知道aja ...
- Streaming编程实例(c,c++,python等)
1.概述 Hadoop Streaming是Hadoop提供的一个编程工具,它允许用户使用任何可执行文件或者脚本文件作为Mapper和Reducer,例如: 采用shell脚本语言中的一些命令作为ma ...
- Vertica数据库操作
删除主键(Vertica数据库的主键值并非唯一的): SELECT ANALYZE_CONSTRAINTS('fb_s.c_log'); 找到key名,再: ALTER TABLE fb_s.c_lo ...
- 【Demo 0004】Android 布局
本章学习要点: 1. 了解Android 常见的四种布局结构; 2. 掌握四种布局及混合布局的使用方法: 3. 掌握布局中定义键值的意义以及参数使用方法 ...