网站布局问题答案

【问题标题】：layout problems with site网站布局问题
【发布时间】：2012-07-07 17:31:33
【问题描述】：

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

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

这是正常窗口中的站点 - http://imageshack.us/photo/my-images/407/problem2a.jpg/

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

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

【问题讨论】：

我的洗碗机有问题。它是什么？ -- 除非您告诉我们您是如何设置当前布局的，否则我们永远不会知道。
使用检查器 (Firebug) 了解 thisoldbear.com 的工作原理。
为什么是脸颊？我试着尽可能地解释它。你是什么意思我是怎么设置的？
我想你有一些 CSS 代码为你的主容器定义了一个特定的宽度。像“宽度：900px”之类的东西。看起来滚动条已被关闭。寻找“溢出-x：隐藏”或其他有影响的东西。除了这些基本想法之外，如果不查看您的网站和代码（或者更好的是，发布导致问题的代码位），任何人都无法提供帮助
打个比方，不厚脸皮对不起。通过您当前的布局是如何设置的，我的意思是向我们解释一下：您是否绝对位置，表格样式，给最外面的容器留出边距？越详细越好！

标签： css layout width

【解决方案1】：

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

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

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; }

【讨论】：

当我补充说一切都像导航和标志一样混乱：/
请同时发布您的 HTML，我将为您提供一些关于如何重组标记的建议
@user1506962 - 我不知道你的图片是如何被剪切的等等，但是看看我刚刚发布的代码是否有效
@user1506962 - 很高兴我能帮上忙 :)

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

改为放下大容器并仅使用带有margin: auto 的单个容器将其居中。像这样：

HTML：

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

CSS：

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

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

【讨论】：

是的，这行得通，但我猜我需要改变其他一切似乎一切都混乱了？