文档章节

左右两栏等高实现方法

ys-l
 ys-l
发布于 2010/01/01 11:13
字数 547
阅读 240
收藏 0

等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白,有时需要让右边的高度和左边的保持一致。实现的方法有很多,以前一般是用背景填充来模拟。虽然很简单,但毕境麻烦。现在有了个更简单的方法。这个方法的原理是事先通过正内边距来使其拥有足够高度,然后通过负外边距来使得其的位置不变。通过给父元素溢出隐藏,我们可以隐藏掉事先占据的足够高的空间。由两列实际的内容高度来决定整个父元素的高度,从而实现了等高。

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS等高布局</title>
<style type="text/css">
body { margin: 0; padding: 0; font:14px/1.6em Arial, Helvetica, 宋体,sans-serif; text-align: cnter;}
.main { width: 800px; margin: 0 auto; margin-top: 20px; color: #FFF; overflow: hidden;}
.left {float: left; width: 550px; background: #f00; border: 1px solid #666; padding-bottom: 6180px; margin-bottom: -6180px;}
.right {float: right; width: 240px; background: #090; border: 1px solid #666; padding-bottom: 6180px; margin-bottom: -6180px; }
</style>
</head>
<body>
<div class="main">
<div class="left">
<p>我很高</p>
<p>我也很高</p>
<p>我非常高</p>
<p>我就是很高</p>
<p>我很高</p>
<p>我也很高</p>
<p>我非常高</p>
<p>我就是很高</p>
<p>我很高</p>
<p>我也很高</p>
<p>我非常高</p>
<p>我就是很高</p>
<p>我很高</p>
<p>我也很高</p>
<p>我非常高</p>
<p>我就是很高</p>
</div>
<div class="right">
<p>我会和左边一样高吗?</p>
<p>我和左边一样高哦!</p>
</div>
</div>
</body>
</html>

这里考滤到一个意外,就是右边的内容比左边多的时候;其实只需对左右两边都进行正内边距和负外边距设置就行了。这样不管是左边还是右边高,两边的高度始终都是一样的。利用这个原理,我们还可以实现三列多列等高布局。

原文链接:http://leotheme.cn/javascript/css-to-realize-accordant.html

本文转载自:http://hi.baidu.com/yowsah/blog/item/10d280cb552a80f653664f60.html

ys-l
粉丝 3
博文 19
码字总数 4496
作品 0
昌平
程序员
私信 提问
【CSS】margin负值 – 一个秘密武器

CSS盒模型中,margin是我们老熟悉的一个属性了, 它的负值你用过吗? 你知道margin负值的秘密武器吗?我们一起看看吧! 1、带竖线分隔的横向列表(例如:网站底部栏目) 传统的分隔符是使用 ...

呢喃的猫咪
2013/03/20
204
1
你所不知道的 CSS 负值技巧与细节

写本文的起因是,一天在群里有同学说误打误撞下,使用负的 实现了加号。嗯?好奇的我马上也动手尝试了下,到底是如何使用负的 outline-offset 实现加号呢? 使用负值 outline-offset 实现加号...

chokcoco
08/08
0
0
Web布局连载——两栏固定布局(五)

在上一篇《Web布局连载——两栏固定布局(四)》中留了一个下文,“No div, no float, no clear, no hack”。看起来很有意思,这种没有div,没有float,没有清除浮动和没有hack的布局,还是看...

大漠
2012/09/13
207
0
css经典布局系列三——三列布局(圣杯布局、双飞翼布局)

三列布局背景介绍 三列元素,左右元素固定宽度; 中间元素自适应; 定位实现三列布局 左右两列绝对定位并且固定宽度; 中间元素自适应,且左右margin设置为左右元素的宽度; 定位的缺点:当出...

木头房子
04/22
0
0
我所知道的几种display:table-cell的应用

一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性 的,但是IE6/7只能对你说sorry了,这...

林文安
2012/05/30
225
0

没有更多内容

加载失败,请刷新页面

加载更多

JavaScript权威指南笔记3-2

第三章、类型、值和变量 2、文本 I-1 字符串 是一组由16位值组成的不可变的有序序列。 每一个字符来自Unicode字符集 用来表示文本 长度是其所含16位值的个数。 和数组一样,索引从0开始。 JS...

_Somuns
12分钟前
1
0
Spring StateMahcine State 配置详解

状态机包含一系列各种关系的状态,最简单的关系,就是经过状态A事件E直接到状态B,当然还有选择关系,层级关系等等。该篇介绍Spring 状态机 状态的配置。我们知道可以通过方法configure(Sta...

microservice
13分钟前
2
0
基于 HTML5 Canvas 实现的文字动画特效

前言 文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态...

htdaydayup
20分钟前
2
0
2019 年 Java 开发者生态报告!

数据来源自国外的一个调查,在过去的几周,这份调查一共采访了6707名开发人员。数据来源:https://www.baeldung.com/java-in-2019。 1.JDK 版本使用情况 即使在今天 Java 13 都已经发布了,J...

SnailClimb
20分钟前
3
0
支撑微博亿级社交平台,小白也能玩转Redis集群(原理篇)

Redis作为一款性能优异的内存数据库,支撑着微博亿级社交平台,也成为很多互联网公司的标配。这里将以Redis Cluster集群为核心,基于最新的Redis5版本,从原理再到实战,玩转Redis集群 常见R...

分布式系统架构
29分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部