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をに#menu設定しcenterます。これにより、3つのリンクが中央に配置されます。

フッターのテキストも。を介して中央に配置されtext-align: centerます。

まず、同じことを尋ねる新しい質問を開くのは悪い習慣です。第二に、あなたがそれの大部分を書かない限り、「私のコード」を発表することを避けてください（これはここでは当てはまりません）。第三に、フッターのtext-alignは簡単に検索できるため、この質問はあまり研究努力を示していません。

于 2013-03-26T03:24:11.323 に答える
0

いくつかのこと：

  • フッターのサイズを変更しても、ラッパーが何であるかをposition:fixedそのまま使用できます。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： FIDDLE

例2：フッターをウィンドウの下部に固定するには、これをフッターに追加します。

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