0

我创建了一个“菜鸟”页面，我想使用 CSS 对其进行样式化，并且在某种程度上我已经做了一些事情。

我希望我的内容出现在中心，同时带有（白色背景）和两个侧边栏（左右）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: 989px是 1024x768 屏幕的安全区域。

示例 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 回答