Question

我正在尝试使用div和css样式创建一个网站，我想做的是将2个分区一个放在另一个上面，但是以页面中间为中心，所以顶部框将被称为容器，底部框将被称为快速链接

我想要实现的一个例子是http://www.whirlpool.net.au/ 所以我有两个div盒子顶部容器将包含所有页面信息，底部将有一个extrernal样式，使编辑链接更容易，因为它将被放置在网站的每个页面，但我不知道它是否可能这样？

这两个div的宽度都是900px 容器的高度为0 auto;所以它随着放在里面的内容而增长。 quicklinks div的高度为60px，当内容增长或缩小时，显然会在容器盒下的页面上下移动。

我使用了

<stlye type="text/css">

.container{<br>
position:absolute: <br>
left: 50%;<br>
width: 900px;<br>
height: 0 auto;<br>
top: 0%;<br>
margin-left: -450px;<br>
}

.quicklinks{<br>
position:static; <br>
left: 50%;<br>
width: 900px; <br>
height: 60px; <br>
margin-left: -450px; <br>
}
</style>

</head>

<body>

<div class="container"></div><br>
<div class"quicklinks"></div><br>
</div>

</body> <br>
</html>

并且上面的代码会将容器框带到页面的正中央，但是quicklinks div将位于此顶部，我需要将它放在它下面。

<stlye type="text/css">

.container{<br>
width: 900px;<br>
height: 0 auto;<br>
top: 0%;<br>
}

.quicklinks{<br>
position:static; <br>
width: 900px; <br>
height: 60px; <br>
}
</style>

</head>

<body>

<div class="container"></div><br>
<div class"quicklinks"></div><br>
</div>

</body> <br>
</html>

上面的代码会将quicklinks div带到容器下面，但两者都会位于左上角，我可以让它看起来像是在中心，但我希望它能让acturley找到每个浏览器的中心。

所以请任何人帮忙解决这个问题，

我使用正确的脚本方法来实现这一点，如果是这样的话
我错过了什么来纠正这个问题？

欢呼声保罗

Answer 1

我正确使用了您的顶级示例和拼写样式，并分配了类快速链接。

然后保证金：两个div的auto都是一种享受。我也删除了这个位置：静态，不认为它是必需的。

.container{
  width: 900px;
  height: 0 auto;
  top: 0%;
  margin: auto;
}

.quicklinks{
  width: 900px; 
  height: 60px; 
  margin: auto; 
}

菲尔

Answer 2

要达到这个效果，你需要这样的东西

body {text-align:center;}
#wrapper {margin-left:auto;margin-right:auto; text-align:left;width:900px;}
#container{}
#quicklinks{}

<div id="wrapper">
  <div id="container">
  </div>
  <div id="quicklinks">
  </div>
</div>

一旦你建立了页面宽度并以包装为中心，div的默认行为就是一个在另一个之下。

Answer 3

这是一个相当简单的任务，你需要做的就是设置margin：0 auto;对于两个div来说，这将使他们两者都处于中心位置。

下面的代码示例是一个非常简单的示例。

<style>
    .box {width:900px; margin:10px auto; padding:10px; border:5px solid #000;}
</style>

<div class="box">Top Box</div>
<div class="box">Bottom Box</div>

更好的方法是使用包含DIV来固定宽度和中心

<style>
    .container {width:900px; margin:0 auto; padding:10px; border:5px solid #99cc00; }
    .box {margin-top:10px; padding:10px; border:5px solid #000;}
</style>
<div class="container">
    <div class="box">Top Box</div>
    <div class="box">Bottom Box</div>
</div>

3 个答案: