如何让您的div一路下滑?如何填充父div的垂直空间?如何在不使用背景图像的情况下获得等长的列?
我花了几天时间使用Google搜寻和剖析代码,以了解如何尽可能简单高效地完成等长列。这是我想出的答案,我想在一个小教程中与社区复制和粘贴样式共享此知识。
对于那些认为这是重复的,不是。我受到几个网站的启发,其中包括http://matthewjamestaylor.com/blog/equal- height-columns-cross-browser-css-no-hacks,但是下面的代码是唯一的。
现代Web设计中棘手的事情之一是创建两个(或更多)列布局,其中所有列的高度均相等。我着手寻找一种在纯CSS中实现此目的的方法。
您可以通过在包含两个列(或页面背景)的wrap-div中使用背景图像来最轻松地完成此操作。
您也可以通过使用CSS表格单元格来完成此操作,但是不幸的是,浏览器对此的支持仍然很差,因此它不是首选的解决方案。继续阅读,有更好的方法。
我从网络上的两个页面中找到了灵感,尽管我更喜欢我的解决方案,因为它给了我更多的自由,可以使用圆角和精确的宽度或百分比布局,并且更容易编辑,最终布局的div不会强迫您做负数运算。
==诀窍:==
首先创建背景设计列,然后放置一个可以容纳常规内容的全宽div。诀窍全都在于列中的浮动列,当内容的长度延长时,无论哪个端列最长,都会在所有父列上产生推入效果。
在此示例中,我将在带有圆角的居中wrap-div中使用2列网格。我试图将绒毛保留下来,以方便复制粘贴。
==步骤1 ==
创建您的基本网页。
<!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>
==步骤2 ==
在另一个浮动div中创建一个浮动div。然后在内部div上应用负边距,以使其视觉上弹出框架。我添加了虚线边框以说明目的。要知道,如果您将外部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中:创建一个没有背景的div,将所有列的with组合在一起。它将推入内部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*/ } #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 ==
为了使它更好,您可以将整个设计放在div居中,并使其圆角。除非您对此进行特殊修复,否则圆角不会在旧版IE中显示。
<!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>