1

我的网站有问题。当我调整窗口大小时，一切都保持静止不动，窗口只是跨越一切。

这里有一些图像可以更好地说明它......希望。

这是普通窗口中的网站 - http://imageshack.us/photo/my-images/407/problem2a.jpg/

调整大小时 - http://imageshack.us/photo/my-images/696/problemim.jpg/

谁能告诉我问题是什么？我希望我的布局像这个网站一样工作 - http://www.thisoldbear.com/

4

3 回答 3

2

下次，请将您的 HTML 和 CSS 代码添加到您的问题中，因为这会使一切变得如此简单，并且您将获得更准确的答案。

通过查看您的照片，我感觉您已经添加了左侧填充/边距（150 像素的东西？）以尝试将您的内容居中，而您确实应该将其添加到您的容器 DIV(s)

margin: 0 auto;

这将使内容居中并在调整窗口大小时保持居中

更新

HTML

<div id="container">
  <header>
    <div id="logo"></div>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
    </nav>
  </header>
</div>
<div class="content">
  ...
</div>

CSS

body {
  background: url(../../core/images/bg.png);
  font-family: 'Pontano Sans', sans-serif;
  padding: 0;
  margin: 0;
}

#container {
  width: 100%;
  height: 80px;
  background: url(../../core/images/header.png);
}

#content, header {
  position: relative;
  width: 800px;
  margin: 0 auto;
}

#logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 124px;
  height: 171px;
  background: url(../../core/images/logo.png);
}

nav {
  padding: 0;
  margin: auto 0px auto 150px;
}

nav a {
  text-decoration: none;
  font-size: 17px;
  color: #f4f4f4;
  outline: none;
  margin: 0px 0px 0px 50px;
}
nav a:hover { text-decoration: underline; }
于 2012-07-07T15:11:02.203 回答
1

检查您分配给最外层布局的宽度（可能是一个 div）。您似乎为页面分配了一个固定宽度，该宽度与您的屏幕分辨率大小大致相同或更大。尝试使用较小的尺寸和属性 margin:0 auto;

于 2012-07-07T15:15:52.470 回答
1

您可能有一个宽度为 1000 像素的大容器，并使用它来使您的布局居中，可能带有边距和填充。

而是放下大容器并仅使用一个容器margin: auto将其居中。像这样：

HTML：

<body>
    <div id="main-container">
    </div>
</body>

CSS：

#main-container {
    width: 800px;
    margin: auto;
}

请注意，您不能float:left在主容器上使用。如果您需要（例如用于背景），请包含另一个width: 100%没有填充或边距的容器宽度并浮动该宽度。

于 2012-07-07T15:09:49.833 回答