Question

有类似的问题，但没有一个解决这个问题。

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

margin:0 auto;对该部分中的所有div都无效。我也尝试使用text-align:center;，但这也不起作用（奇怪的是，这只是在该部分中的h1元素居中但没有别的......）。

我遇到的另一个问题是我想要扩展所有背景以适应浏览器窗口的宽度，并且所有内容都应该保留在中心，但这似乎不适合这种布局。如果我将容器div的宽度设置为100％它会扩展但我最终必须将所有列和offset-by类设置为100％然后会弄乱导航等。我想保持我的布局如何我现在拥有它，但我只想扩展背景（包括页脚高度）以及所有内容都居中。

以下是浏览器中的内容截图：http://i.imgur.com/K3LAshv.png

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

非常感谢提前!!

Answer 1

骨架让我感到困惑，有太多的事情发生了...所以我删除了所有CSS并添加了一些简单的规则来演示我将用来从头开始编码这种行为的技术

由于您希望背景颜色带延伸到容器之外，因此我将容器设置为100％并在页眉，主页和页脚的周围放置额外的div。它们的宽度也是100％。 #header, #main, footer的宽度默认设置为960px，并通过媒体查询缩小。我还设置了列和爆头图像以使用百分比而不是像素。我还从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; 
    }
}

如何将响应骨架中的div内容集中在一起？

1 个答案: