探索CSS实现三行三列等高布局
[导读]翻译自:In Search of the Holy Grail原文:http://www.alistapart.com/articles/holygrail这个翻译的页面版权归greengnn所有,转载请注明出处第一步:创建一个结构xhtml开始于header, footer, and container <di...
翻译自:In Search of the Holy Grail
原文:http://www.alistapart.com/articles/holygrail
这个翻译的页面版权归greengnn所有,转载请注明出处
原文:http://www.alistapart.com/articles/holygrail
这个翻译的页面版权归greengnn所有,转载请注明出处
第一步:创建一个结构
xhtml开始于header, footer, and container
<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>
<div id="container"></div>
<div id="footer"></div>
CSS先定义container,给将要加入的sideleft,和sideright留下个位置
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
我们的布局现在看起来是这样的
图1——创建框架
第二步:增加内容元素
在第一步基础上增加内容元素
<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
然后分别定义widths和float 让元素排列在一条线上,还有清除footer的浮动对齐
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
}
#right {
width: 150px; /* RC width */
}
#footer {
clear: both;
}
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
}
#right {
width: 150px; /* RC width */
}
#footer {
clear: both;
}
这里给center元素定义了100% width,让它占满montainer的可用空间,现在的布局变成了这样
图2:增加内容元素
第三步:把left放到正确的位置
要把left放到正确的位置,我们分两步
1.让left和center在同一水平线
#left {
width: 200px; /* LC width */
margin-left: -100%;
}
width: 200px; /* LC width */
margin-left: -100%;
}
看看效果
图3——left移动完成一半
2.用相对定位,把left继续移动到正确的位置
#container .columns {
float: left;
position: relative;
}
#left {
width: 200px; /* LC width */
margin-left: -100%;
right: 200px; /* LC width */
}
float: left;
position: relative;
}
#left {
width: 200px; /* LC width */
margin-left: -100%;
right: 200px; /* LC width */
}
让left距离他右边元素center 200px后,行了,left终于到自己位置上了
图4——left到了自己的位置
- 转载请注明来源:IT学习网 网址:http://www.t086.com/ 向您的朋友推荐此文章
- 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们,我们会尽快予以更正。