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 ...
随机推荐
- WCF技术剖析之十五:数据契约代理(DataContractSurrogate)在序列化中的作用
原文:WCF技术剖析之十五:数据契约代理(DataContractSurrogate)在序列化中的作用 [爱心链接:拯救一个25岁身患急性白血病的女孩[内有苏州电视台经济频道<天天山海经> ...
- [REST Jersey] @QueryParam Demo
This demo sourced from the jersey tutor. https://jersey.java.net/documentation/latest/jaxrs-resource ...
- Oracle管道函数(Pipelined Table Function)介绍
一 概述: 1.管道函数即是能够返回行集合(能够使嵌套表nested table 或数组 varray)的函数,我们能够像查询物理表一样查询它或者将其 赋值给集合变量. 2.管道函数为并行运行,在普 ...
- HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...
- Eclipse用法和技巧十一:分栏显示
在编码的时候,有时候需要同时看到两个文件的代码.或者在代码走读的时候,能同时看到两个文件的代码能加快我们对代码的理解.来看看如何在eclipse中同时显示两个文件的代码. 步骤一:拖住一 ...
- 跨服务器查询sql (摘要)
首先推荐一个神作:http://www.cnblogs.com/daniel206/archive/2008/01/16/1041748.html 大神比较详细了.而且条理很清晰. 然后摘录一些其他的 ...
- [jQuery] check if an id exists - Google 网上论坛
[jQuery] check if an id exists - Google 网上论坛 From: http://docs.jquery.com/Frequently_Asked_Questions ...
- 【开发手记一】老生常谈:简简单单配置ZED板开发环境
说明:整理之前项目博客,此系列之前发表于与非网 http://www.openhw.org/module/forum/thread-552476-1-1.html 在拿到开发板和配套教材之前,我们小组 ...
- cms配置使用
在早期完成了页面的切图之后,需要配置cms来实现小编上传数据更新页面的流程,在取得SEO的官网URL规则之后,就能开始官网在cms的基本配置了. 下面介绍cms的特点: 类别,决定内容与内容对应的路径 ...
- Prime Path (poj 3126 bfs)
Language: Default Prime Path Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11703 Ac ...