如何在纯CSS中创build相等高度的列
如何让你的div达到一路下降？ 如何填补父div的垂直空间？ 如何获得等长的列而不使用背景图片？
我花了两天的时间search并parsing代码，以了解如何尽可能简单高效地完成等长列。 这是我想出来的答案，我想在一个小教程中与社区复制和粘贴样式分享这些知识。
对于那些认为这是重复的，事实并非如此。 我受到了几个网站的启发，其中包括http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks，但下面的代码是独一无二的。
对于一个更简单的解决scheme，可以给父级display: table和它的子级display: table-cell ，如下所示：
.parent { display: table; } .child { display: table-cell; }
请参阅DEMO 。
请注意，这在IE7中不起作用，所以如果需要IE7支持，则需要更详细的解决scheme。
现代网页devise中棘手的事情之一是创build一个两列（或更多）列布局，其中所有列的高度相同。 我开始寻找一种在纯CSS中做到这一点的方法。
您可以通过在包含您的两列（或页面的背景）的换行区中使用背景图像来轻松完成此操作。
你也可以通过使用CSS表格单元来做到这一点，但不幸的是浏览器对此的支持仍然是阴暗的，所以这不是一个首选的解决scheme。 继续阅读，有一个更好的方法。
我从网页上的两个页面find了我的灵感，尽pipe我更喜欢我的解决scheme，因为它给了我更多的自由来使用圆angular，精确的宽度或百分比布局，而且编辑起来更容易，最终的布局控制div不会强迫你做负数运算。
==技巧：==
首先你创build背景devise列，然后你把一个全宽div可以容纳你的常规内容。 技巧是关于列中的浮动列，当内容长度延长时，无论结束列最长，对所有父列创build推送效果。
在这个例子中，我将在一个圆angular的居中包装盒中使用2列网格。 我已经试图保留绒毛为便于复制粘贴。
==步骤1 ==
创build您的基本网页。
<!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>
==步骤2 ==
在另一个浮动div内创build一个浮动div。 然后在内部div上应用一个负边距，从视觉上popup框架。 为了说明目的，我添加了虚线边框。 要知道，如果将外部div浮动到左侧，并将内部div放在左侧，则内部div将在页边下方，而不会显示滚动条。
<!DOCTYPE HTML> <html> <head> <style> #rightsideBG{ float:right; background:silver; width:300px; border: 3px dotted silver; /*temporary css*/ } #leftsideBG{ float:left; background:gold; width:100px; margin-left:-100px; border: 3px dotted gold; /*temporary css*/ } </style> </head> <body> <div id="rightsideBG"> <div id="leftsideBG"> this content obviously only fits the left column for now. </div> </div> </body> </html>
==步骤3 ==
在里面的div：创build一个没有背景的div，所有列的组合。 它会推动内部div的边缘。 我为了说明目的添加了一个虚线边框。这将是您内容的canvas。
<!DOCTYPE HTML> <html> <head> <style> #rightsideBG{ float:right; background:silver; width:300px; border: 3px dotted silver; /*temporary css*/ } #leftsideBG{ float:left; background:gold; width:100px; margin-left:-100px; border: 3px dotted gold; /*temporary css*/ } #overbothsides{ float:left; width:400px; border: 3px dotted black; /*temporary css*/ } </style> </head> <body> <div id="rightsideBG"> <div id="leftsideBG"> <div id="overbothsides"> this content spans over both columns now. </div> </div> </div> </body> </html>
==步骤4 ==
添加您的内容。 在这个例子中，我放置了布局上的两个div。 我也拿走了虚线的边框。 Presto，就是这样。 你可以使用这个代码，如果你喜欢。
<!DOCTYPE HTML> <html> <head> <style> #rightsideBG{ float:right; background:silver; width:300px; } #leftsideBG{ float:left; background:gold; width:100px; margin-left:-100px; } #overbothsides{ float:left; width:400px; } #leftcol{ float:left; width:80px; padding: 10px; } #rightcol{ float:left; width:280px; padding: 10px; } </style> </head> <body> <div id="rightsideBG"> <div id="leftsideBG"> <div id="overbothsides"> <div id="leftcol">left column content</div> <div id="rightcol">right column content</div> </div> </div> </div> </body> </html>
==步骤5 ==
为了使它更好，你可以集中在一个包装的整个devise，并给它圆angular。 圆angular不会显示在旧的IE浏览器，除非你使用一个特殊的解决scheme。
<!DOCTYPE HTML> <html> <head> <style> #wrap{ position:relative; width:500px; margin:20px auto; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-bottomright: 20px; border-bottom-right-radius: 20px; } #rightsideBG{ float:right; background:silver; width:300px; } #leftsideBG{ float:left; background:gold; width:100px; margin-left:-100px; } #overbothsides{ float:left; width:400px; } #leftcol{ float:left; width:80px; padding: 10px; } #rightcol{ float:left; width:280px; padding: 10px; } </style> </head> <body> <div id="wrap"> <div id="rightsideBG"> <div id="leftsideBG"> <div id="overbothsides"> <div id="leftcol">left column content</div> <div id="rightcol">right column content</div> </div> </div> </div> </div> </body> </html>
==灵感来源==
