Transfer from: http: //www.cnblogs.com/rubylouvre/archive/2009/07/15/1523683.html
Translated from Matthew James Taylor's Equal Height Columns with Cross-Browser CSS and No Hacks, as I understand some parts changed, so that some Chu Xinzhe better understanding.
Create a multi-column layout contour using pure CSS is not an easy task, this tutorial focuses on a number of issues arise in multi-column layout, and then as we waited for a solution to the whole tour is simple-take-all, do not use images, scripts, CSS hacks and most strict XHTML specification can be verified.
Crux of the problem
, Since the contents of each column lead to inconsistent height of the background is not uniform as in FIG. And the background is essentially content (box model by standard content area, make the white area, the border region and the boundary region composed, in the present context the three front; front two IEs) adaptive problem. Reconversion about how to stretch those short height of the column, so that the height of all columns is equal to the maximum height of the column? This is indeed very tricky, because we do not know the height of each column, there is no way to know which column the highest. We can not simply give a clear height of all the columns, which can lead to all the columns are more out of a big blank, or loss due to the very high degree of shortage causes the contents of some columns can not show all of them! In reality, the length of the content is dynamic, so the height of each column is dynamic. We must be aware of the network, there is no "fixed" word, everyone's display resolution are not all the same, the font size is not the same tour, which will affect the height of the display to the content.
The implementation of the separation of content and background
The first step in solving problems is high it splits into two smaller, separate sections can be solved. Thus, we had a corresponding one of the DIV is, now is a corresponding one of the DIV, one for loading the contents, for displaying a background. This separation will help us to control the various elements and the other with a more efficient way to combine them, which caused me soon covered in the following sections.
The use of floating nest solve the problem the highest height of the column.
This is the key to solving multiple columns of equal height. The height of a DIV is equal to the maximum height of the column is the only way to make this DIV that contains all of the columns. In other words, all the columns in a container, the container is the maximum height of the column height. This is a very useful structures.
In order to use this structure will work in all the tour is that we have to make the outer container floating left or right, and his son DIV element contains the contents of each column followed floating, which direction does not matter. Their use floating up aligned with the periphery of the padding container, and floating the container will automatically adjust its height and width to achieve sub-elements comprise floating. However, if the container is defined height and width, it will not change with the size of the sub-element automatically adjusts itself to accommodate the display region of the display sub-element. But in IE6 and lower versions of IE, the child floating elements can be softened peripheral elements; fortunately IE7 and IE8 has been cited positive this does not meet the standards of practice.
To display the background of the container increases
The next step is to increase the total number of additional containers, so that they are nested within each other, and let the number of containers of all peripherals (the original plus the newly added that a) equal columns: 3. These three vessels were used to display the background of each column. Please note, we removed the original background of the columns, they move on these containers.
The new structure of the code layer, so that the new container set in the original peripheral vessel!
<div id="container3"> <div id="container2"> <div id="container1"> <div id="col1">Column 1</div> <div id="col2">Column 2</div> <div id="col3">Column 3</div> </div> </div> </div>
The new presentation code, the new vessel is floated elements!
All the elements left floating, the width of the container to 100%, so that they fill the width of the page. The background color is removed from the content div and added to the container. Note, the original is wide all containers are set to 100%, in fact, no such need, because the floating nest outside the container must be able to accommodate the large size of the internal support child elements!
#container3 { float:left; /*width:100%;*/ background:green;} #container2 { float:left; /*width:100%;*/ background:yellow;} #container1 { float:left; width:100%; background:red;} #col1 { float:left; width:30%;} #col2 { float:left; width:40%;} #col3 { float:left; width:30%;}
By moving the container relative to the positioning
It is perfectly all containers are tired together, displaying only one background color, we must let other background also displayed. To this end we have to take advantage of the relative positioning to make these containers like the same ladder placement. This could have a negative boundaries of technology, but damn box model IE5.5 inconsistent with the W3C, for compatibility we have to use CSS hack. Because this statement is not to use CSS hack, give up. Let # container2 moved to the right by 30%, due to the # container2 filled # container1, and # container1 Tops TV drama three columns, so that the rightmost column was removed from the tour with the right side. And most of the periphery of the bottom container # container3 is exposed, and exposed 30% of the left. We then move the uppermost container # container1, 40% moved to the right, then a second layer covering the original is also exposed to the container, 40% of the left exposed, whereas only the remaining # container1 100% -30% = 30% -40%; also listed above only the rightmost column, it was presented as the leftmost. In this way, the background also showed normal!
Corresponding to the presentation code
#container3 { float:left; /*width:100%;*/ /*没有必要的代码被注释掉！*/ background:green; } #container2 { float:left; /*width:100%;*/ /*没有必要的代码被注释掉！*/ background:yellow; position:relative; right:30%; } #container1 { float:left; width:100%; background:red; position:relative; right:40%; } #col1 { float:left; width:30%;} #col2 { float:left; width:40%;} #col3 { float:left; width:30%;}
把各列的内容移回原来的位置上
由于最上层的那三列都是被整体往右往到(页面的)70%，我们再把它们都往左移回70%就是！最后，由于我们前两个背景容器都是被向右移动，移出了游览器，它们都与游览器的右边连在一起，我们可以设置最底层的背景容器的overflow来隐藏那些被移出的部分。
#container3 { float:left; /*width:100%;*/ /*没有必要的代码被注释掉！*/ background:green; overflow:hidden; position:relative; } #container2 { float:left; /*width:100%;*/ /*没有必要的代码被注释掉！*/ background:yellow; position:relative; right:30%; } #container1 { float:left; width:100%; background:red; position:relative; right:40%; } #col1 { float:left; width:30%; position:relative; left:70%;} #col2 { float:left; width:40%; position:relative; left:70%;} #col3 { float:left; width:30%; position:relative; left:70%;}
对列添加补白（内边距）
最后，我们对列增加补白，让每列显得大方一些，而不是密密麻麻地塞满一列。但是如果我们增加补白，可能有一些游览器的有病又犯了，在IE6和更低版本的 IE中，其怪异的盒子模型，会产生一些我们不愿看到的结果。如，一个 200px 宽 20px 补白的 box 在 IE 中被视为 200px 宽，在其他浏览器中则为正确的 240px。补白应该加在元素的宽度上。
不过放心，我们可以用完全不依赖于 padding 的方法来解决这个问题。相反，我们把列弄窄一点（列宽减去两侧的补白），之后用相对定位把它们移至正确的位置。例如，我们用了 2% 的补白，则 30% 的列将减至 26%，40% 的列减至 36%。用相对定位移回列时需谨记，现在列变窄了，所以当它们一起像最初那样左浮动时，每一个需要比上一个移动更远的距离。
完整的CSS
为了使布局保持在小宽度我在每个内容列增加了overflow:hidden; 这将切去超出列宽的东东，并阻止其干扰其他布局。重申一下，这只是 IE 的问题，其他所有浏览器会保持正确的布局，不管列内是虾米。如果你真想这样做，可以用 IE 条件注释只对 IE 写规则。
#container3 { float:left; background:green; overflow:hidden; position:relative;} #container2 { float:left; background:yellow; position:relative; right:30%;} #container1 { float:left; width:100%; background:red; position:relative; right:40%;} #col1 { float:left; width:26%; position:relative; left:72%; overflow:hidden;} #col2 { float:left; width:36%; position:relative; left:76%; overflow:hidden;} #col3 { float:left; width:26%; position:relative; left:80%; overflow:hidden;}
整个案例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)"/> <meta http-equiv="Page-Exit" content="blendTrans(Duration=0.5)" /> <title>Heroku和Morph AppSpaces：两个Rails托管的新解决方案</title> <style type="text/css"> #header { background:#EBCC67; } #footer { background:#A9EA00; } #container3 { float:left; /* width:100%; */ background:green; overflow:hidden; position:relative; } #container2 { float:left; /* width:100%; */ background:yellow; position:relative; right:30%; } #container1 { float:left; width:100%; background:red; position:relative; right:40%; } #col1 { float:left; width:26%; position:relative; left:72%; overflow:hidden; } #col2 { float:left; width:36%; position:relative; left:76%; overflow:hidden; } #col3 { float:left; width:26%; position:relative; left:80%; overflow:hidden; } </style> </head> <body> <div id="header">AppEngine在本周引起很大反响，它提供了一个简单易用的方法来运行Python写成的Web应用。但是Ruby社区并不需要看Google的脸色，它已经拥有了关于简单部署的解决方案。我们来看两个新的解决方案，它们均是基于Rails开发者使用的公用基础之上构建的。</div> <div id="container3"> <div id="container2"> <div id="container1"> <div id="col1">Column 1<br /><p>Heroku和Morph实验室是Ruby on Rails的托管提供商，提供运行Ruby on Rails应用的整套环境。和传统的托管商相比，他们并不仅仅是提供一个服务器给你，而且提供有趣的工具和接口来帮助你更加容易的工作，使你从繁重的安 装、配置、管理和保证服务器安全中解脱出来。两者皆是使用Amazon的EC2网格计算技术来运行应用，因此你可以毫不担心可伸缩性与性能问题。</p></div> <div id="col2">Column 2<br /><p>另一个被Heroku和Morph实验室所推崇的重要特性是无痛部署。部署一个新应用只需要几分钟而已：来看看Heroku的即时部署demo和Morph eXchange的6分钟部署demo，部署是多么简单。</p></div> <div id="col3">Column 3<br />两者所带来的是如此的相似。InfoQ采访了这两个项目的相关人员，有更多信息奉上。</div> </div> </div> </div> <div id="footer">James Lindenbaum阐述了Heroku的独有特性： <blockquote> Heroku无疑是Rails应用最简单的部署平台。只是简单的把代码放进去，然后启动、运行，没人会做不到这些。Heroku会处理一切，从版本控制到 自动伸缩的协作（基于Amazon的EC2之上）。我们提供一整套工具来开发和管理应用，不管是通过Web接口还是新的扩展API。 </blockquote> Heroku的一个非常有趣的特性就是基于浏览器的开发环境。它参考了Gyre的开发经验，Gyre的开发者Adam Wiggins也是Heroku背后的一员。因此如果你希望快速修改和追加的话，只需要通过浏览器编辑正在运行的应用的源代码，并在修改后自动部署。当然，使用浏览器IDE并不是唯一访问Heroku服务的方法，还可以来看看Heroku的API和外部Git访问。 </div> </body> </html>
转载于:https://www.cnblogs.com/JoannaQ/archive/2013/02/10/2909692.html