2

有类似的问题，但他们都没有解决这个问题。

我使用骨架框架 ( http://www.getskeleton.com ) 构建了我的网站。出于某种原因，当我尝试对网站主 div 中的内容应用填充或任何大于 5px 的边距时，文本部分会跳到图像下方。我试过使用他们的“offset-by”类，但同样的事情发生了。我试过使用

margin:0 auto;在该部分的所有 div 上，但无济于事。我也尝试过使用text-align:center;，但这也不起作用（奇怪的是，这仅将 h1 元素集中在该部分中，而没有其他...）。

我遇到的另一个问题是我希望所有背景都扩展以适应浏览器窗口的宽度，并且所有内容都应该保持在中心，但这似乎不适用于这种布局。如果我将容器 div 的宽度设置为 100%，它确实会扩展，但我最终不得不将所有列和偏移量类设置为 100%，然后这会打乱导航等。我想保持我的布局如何我现在有了它，但我只想扩大背景（包括页脚高度）并让所有内容居中。

这是它在浏览器中的截图：http: //i.imgur.com/K3LAshv.png

任何人都可以看看代码，让我知道我应该在这里修复什么吗？我在 JSFiddle 上添加了我的代码：http: //jsfiddle.net/z9uVK/

提前谢谢了！！

4

1 回答 1

1

骨架让我很困惑，发生了很多事情......所以我消除了所有 CSS 并添加了一些简单的规则来展示我将从头开始编写此行为的技术

由于您希望背景色带超出容器，我将容器设置为 100%，并在每个页眉、主页和页脚周围放置额外的 div。这些也有 100% 的宽度。的宽度#header, #main, footer默认设置为 960 像素，并通过媒体查询减小。我还将列和爆头图像设置为使用百分比而不是像素。我还从 HTML 中删除了几个内联样式规则，因为它们破坏了这个新代码。

http://jsfiddle.net/W7wG3/1/

// part of my css:
.container{width:100%;}
#headerBin{ 
    background-color: white; 
    border-top: 15px solid #4d4d4d;
}

#header, footer, #main{
    width: 960px; 
    margin:auto; 
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    #header, footer, #main{
      width: 768px; 
      margin:auto; 
    }
}
于 2013-09-10T20:33:59.893 回答