为了让网页更美观、协调，有的时候需要用到左右等到布局，传统的等高布局是用 javascript 实现的，现在来看看 silence 发明的真正的 CSS 实现的等高布局，其方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Design Corp" content="jonmax.com" />
<meta name="Designer mail" content="maozhenzhi(at)gmail.com" />
<meta name="roots" content="jonmax.com" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" type="text/css" media="print" href="jonStyle/css/print.css" />
<link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="jonStyle/css/master.css" />
<link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="jonStyle/css/master_color.css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/index.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="/rsd.xml" />
<link rel="start" href="" title="Home" />
<script src="jonStyle/js/common.js" type="text/javascript" language="javascript" ></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
#wrap{
overflow:hidden;
width:1000px;
margin:0 auto;
}
#left,#center,#right{
margin-bottom:-10000px;
padding-bottom:10000px;
}
#left{
float:left;
width:250px;
background:#00FFFF;
}
#center{
float:left;
width:500px;
background:#FF0000;
}
#right{
float:right;
width:250px;
background:#00FF00;
}
</style>
</head>
<body id="" class="">
<div id="wrap">
<div id="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div id="center">
<p>center</p>
……（20个或更多个）
<p>center</p>
</div>
<div id="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
</body>
</html>
转载于：http://www.17css.com/
分享到：
相关推荐
三列等高布局旧版flex.html
自适应三列等高布局旧版flex.html
CSS三行三列等高布局图文教程 本文将详细介绍如何使用CSS实现三行三列等高布局，并提供了详细的图文教程。 一、创建结构 首先，我们需要创建一个基本的HTML结构，包括header、container和footer三个部分。 ```...
三列等高CSS布局的一个实例， 修改国外的一个demo， 兼容到了IE5.5 和标准的浏览器OperaFirefoxSafari。 不过hack太多，不是很喜欢这样做。全部代码如下： <?xmlversion=1.0encoding=gb2312?><!...
纯CSS实现三列DIV等高布局.html纯CSS实现三列DIV等高布局.html纯CSS实现三列DIV等高布局.html纯CSS实现三列DIV等高布局.html
等高布局是网页设计中的一种常见布局方式，其主要目的是使网页中的多个元素或模块在垂直方向上保持相同的高度，即使内容量不同，也能保证视觉的一致性。这种布局方式通常用于创建网格系统、侧边栏与主要内容区域的...
/* 创建3列 */ column-gap: 20px; /* 列间距 */ } ``` 4. **JavaScript解决方案**：虽然CSS3提供了强大的解决方案，但在某些浏览器或者特定场景下，可能还需要依赖JavaScript。例如，可以监听窗口的`resize`...
等高布局是指在网页上，当有多列内容并排放置时，即使各列内容长度不一致，也能保证这些列的可视区域高度相同。这样可以避免出现参差不齐的视觉效果，提升用户体验。在HTML和CSS中，实现等高布局有多种方法，包括...
本篇文章将围绕“利用jQuery进行三行两列等高布局”这一主题展开，探讨如何借助jQuery来创建这种布局。 首先，我们需要理解等高布局的基本原理。三行两列的等高布局意味着页面上有六个独立的单元格，这些单元格被...
因为对于三列等高自适应布局和水平垂直居中对齐需要一些对css3中flexbox基础概念的理解，所以会对flexbox的概念做一个简单的介绍，以为后面的实例做一个铺垫。本人一直认为，不管学习任何知识，对于概念的理解都十分...
在提供的压缩包文件中，`sameHeight`可能就是这样的一个脚本，需要在页面加载完成后调用来应用等高布局。 实现等高响应布局时需要注意以下几点： - **兼容性检查**：确保所选的实现方法对目标用户群体的浏览器有...
本文将详细讲解三种使用CSS实现多列等高布局的方法：弹性盒子布局（Flexbox）、表格单元格布局（Table-Cell）以及假等高列布局（Padding-Margin负值）。 1. **弹性盒子布局（Flexbox）** Flexbox是CSS3引入的一种...
4. `css`：这个文件夹包含样式表文件，用于定义卡片和其他元素的样式，以实现美观的等高布局。 5. `related`：可能包含与插件相关的其他文件，如额外的CSS或JavaScript文件。 6. `fonts`：这个文件夹可能存储了用于...
1. **CSS Flexbox**：在现代浏览器中，使用CSS Flexbox是最简便的实现等高布局的方法。通过设置容器的`display: flex`属性，并配合`align-items: stretch`，可以让子元素（图片）自动拉伸至与最长的子元素等高。 2....
布局扩展之等高布局”着重讲解了一个重要的设计技巧——如何实现等高布局。等高布局是指在网页的不同区域，无论内容多少，都能保持相同高度的布局方式，常用于创建整洁且视觉平衡的界面。 HTML是结构标记语言，...
以最普遍的DIV三列布局来说，想实现三列等高布局，可以借助“overflow”、“padding”和“margin”三个属性来实现。代码如下： HTML代码： 复制代码代码如下: ”container”> ”left”> 左侧</p> 左侧</p> 左侧...
适合前端新手小白的布局方面小技巧，内容主要为利用元素定位和浮动方面的知识实现圣杯布局、双飞翼布局、黏连布局、伪等高布局等，解决浮动元素高度失效和相邻垂直外边距重叠问题，同时还解决ie6下fixed失效问题。
等高瀑布流布局可以分为三种：等宽瀑布流、等高瀑布流和等宽等高瀑布流。等宽瀑布流布局中的图片宽度一致，高度等比例缩放。等高瀑布流布局中的图片高度一致，宽度等比例缩放。等宽等高瀑布流布局中的图片为正方形，...