0

私のページはYahooに似ていると思いますが、期待した結果とコードは次のとおりです。別の方法を試しましたが、機能しません。真ん中にあるはずで、次のセクションがあります。

期待される結果

 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>
4

2 に答える 2

2

の一連の<div>sを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;
}

ここでフィドルを参照してください：http：//jsfiddle.net/8gmdk/

于 2013-03-26T01:13:48.907 に答える
0

すべてのコンテンツを画面の中央に配置するには、次のコマンドを使用できます。

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;
}

幸運を！

于 2013-03-25T22:48:25.450 に答える