CSS圣杯布局
能有人打破了我撰写的圣杯布局与切换DIV定位为在这里看到的作品? http://matthewjamestaylor.com/blog/perfect-3-column.htmCSS圣杯布局
我理解的方式是:
colmask只是一个包装页眉和页脚的内容
colmid是,我想另一个包装定位可容纳一些浏览器如IE7
colleft是真品的包装(不知道为什么这么多包装)
COL1,COL2和COL3是真实的事情,都留下浮动,并设置他们的利润来调整屏幕
自己的外貌有人能更好地解释那是什么设计的禅?我试图将它应用于真实世界的场景,但它并不真正起作用。
的圣杯是一个三栏液体布局,其中三列都是一样的长度,无论含量多少有。他的专栏应该在2-3-1的顺序在HTML(对于SEO)。这个想法是将内容从背景颜色中分离出来并放入不同的div中。一个浮动容器div始终是它浮动内容的高度,所以这里发生的是每个内容div,都有一个相对定位的浮动容器div。这三个包装。
步骤一步,它的工作原理是这样的:
-
建立嵌套的三个嵌套包装内三列。
<div id="container-right"> <div id="container-middle"> <div id="container-left"> <div id="col1">Column 1</div> <div id="col2">Column 2</div> <div id="col3">Column 3</div> </div> </div>
- 浮动时间都并设置其背景颜色(记住,COL1为中心!)
- 设置包装宽度为100%。将色谱柱宽度设置为总计100%(40%,30%,30%)。使他们的定位相对于这两种类型。
- 现在所有的彩色div都在彼此之上。通过设置正确的属性来滑动列颜色包装器div。保留容器 - 单独。将容器中间移动超过30%,以显示下方的颜色。移动容器 - 留下更多以揭示两者。
- 现在,内容位于视口的左侧。使用相同的技术将每个div推入到位,但这次使用左侧的属性。
- 最后,通过设置溢出来切断额外:隐藏在最外面的包装上。请注意,您必须将定位设置为相对于外部div,否则此步骤在IE中不起作用。
好的解释! – CapelliC 2011-10-23 21:23:34
我想出了与所有建议在那里感到沮丧之后,此布局。它的HTML5/CSS3的complient和工作在IE8 +和至少FF21 - 我还没有在其他版本和浏览器测试。但是如果你在寻找一个流畅的布局 - 这个效果很好。
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<style type="text/css">
* {padding:0px; margin:0px;}
html, body {width:100%; height:100%;}
#page {width:100%; height:100%;position:relative;}
#page > #header {
position:absolute;
top:0px;
left:0px;
right:0px;
height:64px;
background:#ccc;
}
#page > #body {
position:absolute;
top:64px;
left:0px;
right:0px;
bottom:64px;
}
#page > #body > #left {
position:absolute;
top:0px;
left:0px;
bottom:0px;
width:192px;
background:#bbb;
}
#page > #body > #center {
position:absolute;
top:0px;
left:192px;
right:192px;
bottom:0px;
}
#page > #body > #right {
position:absolute;
top:0px;
right:0px;
bottom:0px;
width:192px;
background:#bbb;
}
#page > #footer {
position:absolute;
bottom:0px;
right:0px;
left:0px;
height:64px;
background:#ccc;
}
</style>
</head>
<body>
<div id="page">
<div id="header"></div>
<div id="body">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
你看过:http://www.alistapart.com/articles/holygrail/? – 2010-09-22 12:28:26
那个人使用的是不同的技术,但是我会继续冥想,看看我能否更好地理解我所指的其他圣杯 – Lorenzo 2010-09-22 12:51:27