网站的布局问题
我的网站有问题。当我调整窗口的大小时，所有的东西都保持静止不动，窗口只是穿过所有的东西。
这里有一些图片可以让它看起来更好一些..但愿能去。
这是正常窗口中的站点- http://imageshack.us/photo/my-images/407/problem2a.jpg/
调整大小时- http://imageshack.us/photo/my-images/696/problemim.jpg/
谁能告诉我问题出在哪里？我希望我的布局像这个网站一样工作- http://www.thisoldbear.com/
回答 3
Stack Overflow用户
发布于 2012-07-07 23:11:02
下次，请将你的HTML和CSS代码添加到你的问题中，因为它会让一切变得更容易，你会得到更准确的答案。
通过看你的照片，我感觉你已经添加了左侧填充/边距(150px的东西？)尝试并居中您的内容，当您确实应该将此添加到您的容器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; }Stack Overflow用户
发布于 2012-07-07 23:09:50
你可能有一个1000px宽的大容器，并用它来居中布局，可能是页边距和填充。
相反，丢弃大容器，只使用一个带有margin: auto的容器将其居中。如下所示：
HTML：
<body>
<div id="main-container">
</div>
</body>CSS：
#main-container {
width: 800px;
margin: auto;
}注意，您不能在主容器上使用float:left。如果你需要它(例如背景)，包括另一个容器宽度width: 100%，没有填充或边距，并浮动该宽度。
Stack Overflow用户
发布于 2012-07-07 23:15:52
查看分配给最外层布局的宽度(可能是div)。似乎您为页面分配了一个固定的宽度，该宽度与屏幕分辨率大小相同或大于屏幕分辨率。尝试使用较小的大小与属性边距:0自动；
https://stackoverflow.com/questions/11376056
复制相似问题
腾讯云开发者
