0

'noob'ページを作成しましたが、CSSを使用してスタイルを設定したいのですが、ある程度までは何かをしました。

（白い背景）と2つのサイドバー（左と右）を使用してコンテンツを中央に表示したいcolor:blue;

このページの場合： http ：//blogsoc.org/mailここでコードを編集しています：blogsoc.org/mail1

このように（スクリーンショット）：https ：//dl.dropbox.com/u/46445635/stack%20question%20copy.png

4

3 に答える 3

2

すべてのコンテンツを#containerブロックに配置します。

body { background-color: blue; }
#container { margin: 0 auto; width: 989px; background: white; }

margin: 0 autoブロックを垂直方向の中央に配置します。

width: 989px1024x768画面のセーフエリアです。

サンプルHTML：

<html>
    <head>
        <style>
            body { background-color: blue; }
            #container { margin: 0 auto; width: 989px; background: white; }
        </style>
    </head>
    <body>
        <div id="container">
            <!-- All your current content -->
        </div>
    </body>
</html>
于 2012-08-09T18:49:16.470 に答える
1

このhttp://jsfiddle.net/R8S6h/2/show/を見てください

show/（コードを表示するには、を削除してください）

于 2012-08-09T18:55:35.483 に答える
0

あなたはそれを試すことができます（http://jsfiddle.net/wh8RS/とhttp://jsfiddle.net/wh8RS/show/）：

CSS：

html,body{
 overflow:auto;
}
body{
 margin:0;
 width:100%;
 height:100%;
 position:fixed;
 top:0;
 left:0;
}
.clear{clear:both;}
#wrapper{
 overflow:hidden;
 min-height:100%;
}
#sidebarleft,#sidebarright{
 background-color:blue;
 width:250px;
 max-width:25%;
 margin-bottom: -10000px;
 padding-bottom: 10000px;
 min-height:100%;
}
#sidebarleft{
 float:left;
}
#sidebarright{
 float:right;
}
#main{overflow:hidden}

HTML：

<body>
<div id="wrapper">
<div id="sidebarleft">Text 1</div>
<div id="sidebarright">Text 2</div>
<div id="main">Text 3</div>
<div class="clear"></div>
</div>
</body>
于 2012-08-09T19:03:27.717 に答える