Question

我遇到div位置的问题。我的网站供参考;

http://konzine.com

我遇到的问题很难解释。我有一个1000px的包装div，分为两部分;一个是350px，另一个是650px。包装器旨在以页面为中心，左侧和右侧对应于该中心。我需要div来拉伸页面的宽度和长度，以覆盖相应颜色的边。

这可能吗？

快速编辑;

我画了一张照片来更好地说明我的问题：

http://i.stack.imgur.com/UsRJG.jpg

红线表示页面的中间部分，整个黑色轮廓将是包装div，内部2个单独的颜色是内部的2个div。我需要他们在页面上保持中心位置，但也能够出来填充页面。

Answer 1

您的参考站点只使用垂直重复的居中背景图像，该图像由两种颜色组成。

在这种情况下，图像宽度为3300px，所以我不得不在两台显示器上拉伸浏览器以查看它的缺陷。如果您可以假设大多数人不会尝试将其拉伸超出图像的宽度（从技术上讲，您可以将其设置为您喜欢的那么大），那么这可能是最简单的方法。

参考网站的相关css是

html,body {
    background-image:url('images/background.gif');
    background-repeat: repeat-y;
    background-position: center;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    margin: 0px;
}

网站的其余部分将正常放置在包装器中。

Answer 2

您可以通过将其左右边距设置为auto来水平居中包装。例如，以下内容会将ID为div的{{1}}元素水平居中。

wrapper

一个完整的例子：

div#wrapper {
    margin-left: auto;
    margin-right: auto;
}

请注意，在<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test</title> <style type="text/css"> div#wrapper { width: 1000px; margin-left: auto; margin-right: auto; overflow: hidden; border: 1px solid gray; } div#left { float: left; width: 50%; background: #bbccdd; } div#right { float: right; width: 50%; background: #ddeeff; } </style> </head> <body> <div id="wrapper"> <div id="left"> foo<br /> foo<br /> foo<br /> foo<br /> </div> <div id="right"> bar<br /> bar<br /> bar<br /> bar<br /> </div> </div> </body> </html>元素中使用float时，容器div的包含会中断。这是通过div修复的。此修复适用于现代浏览器。如果您想为IE6修复此问题，我在此处记录了一个笨拙的修复：http://notes.susam.in/2011/06/float-containment.html

2个不同大小的div居中

2 个答案: