0

我是预期的结果，代码如下。我目前的风格有效，但问题是页脚太宽，并且 menu1.menu2,menu3 不像图示的那样爆炸，

预期结果

 50%            |LeftHeader                middleHeader                 RightHeade|    50% 
 50%            |                        Menu1 Menu2 Menu3                        |    50%

 50%            |Content goes here ***********************************************|    50%
                |*****************************************************************|

 50%            |                     text of Footer goes here                    |    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%
}
#leftm {
    text-align: right;
}
#content {
    top:50px;
    bottom:150px;
    overflow:auto;
}
#footer {
    bottom: 0;
    width: 100%;
    background-color:#afa;
    height:150px;
    position:fixed;
}
#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">
     <div id="leftm"><a href="#">menu1</a></div>
     <a href="#">menu2</a>
     <a href="#">menu3</a>
  </div>
    <div id="content">
vbcfxbfgbfcgbfg
    </div>
    <div id="footer">
      <div id="footertext">
        And here's the footer
    </div>
    </div>
</div>
</body>

我当前代码的结果

 50%            |LeftHeader                middleHeader                 RightHeade|    50% 
 50%            |Menu1                         Menu2                       Menu3  |    50%

 50%            |Content goes here ***********************************************|    50%
                |*****************************************************************|

 50%            |                     text of Footer goes here                           |    50%
4

3 回答 3

2

在此处查看更新的代码。

我已经将菜单链接包装在另一个 div 中：display: inline-block设置text-align为. 这使三个链接居中。#menucenter

页脚中的文本也通过 居中text-align: center。

首先，提出同样问题的新问题是不好的做法。其次，避免公布“我的代码”，除非您编写了大部分代码（这里不是这种情况）。第三，这个问题没有显示出太多的研究工作，因为可以很容易地搜索到页脚文本对齐。

于 2013-03-26T03:24:11.323 回答
0

一些东西：

  • 您可以调整页脚的大小并仍然使用position:fixedat ，50%因为这就是包装器的用途。
  • 你有一些不必要的标签（如果我明白你想要什么）
  • 当您似乎不希望这样做时，您将菜单项的大小调整了 33%。

jsFiddle

HTML

<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">vbcfxbfgbfcgbfg</div>
    <div id="footer">
        And here's the footer
    </div>
</div>

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: 100%;
    margin: 0 auto;
    background-color:#faa;
    height: 20px;
    font-size: 0;
    text-align:center;
}
#menu > a {
    display: inline-block;
    font-size: 12pt;
    margin:0 .5em;
}
#content {
    top:50px;
    bottom:150px;
    overflow:auto;
}
#footer {
    bottom: 0;
    width: 50%;
    background-color:#afa;
    height:150px;
    position:fixed;
    text-align:center;
}
于 2013-03-26T03:21:24.373 回答
0

我对目标感到困惑。是否需要修复页脚？如果是，请参见示例 2。包装器是否需要高度为 100%？

示例 1： 小提琴

示例 2：要将页脚固定到窗口底部，请将其添加到页脚：

width:50%;
position:fixed;
bottom:0;
left:50%;
margin-left:-25%;
于 2013-03-26T03:59:30.560 回答