如何布局我的网站有4行和1列？
如何布局我的网站有4行和1列？
提问于 2013-03-25 22:38:07
我希望我的页面类似于雅虎，我的预期结果和代码如下所示。我尝试过不同的方法，但不起作用。它应该在中间，并有以下几节。
预期结果
50% |LeftHeader middleHeader RightHeade| 50%
50% | 50% Menu1 Menu2 Menu3 50% | 50%
50% |Content goes here ***********************************************| 50%
|*****************************************************************|
50% | 50% text of Footer goes here 50% | 50% 例如，这些行>> \\显示边框段有那么大，但它的文本应该位于中间。
我的代码如下
<html>
<head>
<style>
#wrapper {
margin: 0 auto;
width:50%;
}
#header {
background-color:#faa;
height:50px;
font-size: 0;
}
#header > div {
display: inline-block;
width: 33.3333%;
font-size: 12pt;
height: 100%;
}
#left {
background-color:red;
height:20px;
}
#middle {
background-color:yellow;
height:20px;
}
#right {
background-color:green;
height:20px;
}
#menu {
width: 100%;
margin: 0 auto;
background-color:#faa;
height: 20px;
font-size: 0;
}
#menu > a {
display: inline-block;
font-size: 12pt;
width: 33.333%
}
#content {
top:50px;
bottom:150px;
overflow:auto;
}
#footer {
bottom: 0;
width: 100%;
background-color:#afa;
height:150px;
}
#footer > div {
margin-left: 50%;
}
</style
>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="left">
left header
</div>
<div id="middle">
middle
</div>
<div id="right">
right header
</div>
</div>
<div id="menu">
<a href="#">menu1</a>
<a href="#">menu2</a>
<a href="#">menu3</a>
</div>
<div id="content">
content
</div>
<div id="footer">
footer is here
</div>
</div>回答 2
Stack Overflow用户
回答已采纳
发布于 2013-03-26 01:13:48
在inline-block中使用一系列的inline-block，以relative位置和margin: 0 auto为中心。页脚可以用position: absolute放在底部，但是您必须手动添加页边距，因为绝对定位不支持自动对中。
CSS:
#wrapper {
margin: 0 auto;
width:50%;
}
#header {
background-color:#faa;
height:50px;
font-size: 0;
}
#header > div {
display: inline-block;
width: 33.3333%;
font-size: 12pt;
height: 100%;
}
#left {
background-color:red;
height:20px;
}
#middle {
background-color:yellow;
height:20px;
}
#right {
background-color:green;
height:20px;
}
#menu {
width: 50%;
margin: 0 auto;
background-color:#faa;
height: 20px;
font-size: 0;
}
#menu > a {
display: inline-block;
font-size: 12pt;
width: 33.333%
}
#content {
top:50px;
bottom:150px;
overflow:auto;
}
#footer {
position: absolute;
bottom: 0;
margin-left: 12.5%;
width: 25%;
background-color:#afa;
height:150px;
}见Fiddle这里：http://jsfiddle.net/8gmdk/
Stack Overflow用户
发布于 2013-03-25 22:48:25
要使屏幕中心的所有内容居中，可以使用以下命令：
body {
width: 960px; /* define yours, you can also use max-width if you're going to use a fluid layout */
position: relative;
margin: 0 auto;
left: 0;
right: 0;
}祝好运!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15626146
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号