1

我正在尝试制作一个完全响应的网站，但我需要页面的默认宽度为 960 像素。我的结构如下：

<div id="container">
<table id="content">
all the content is here
</table>
</div>

现在我希望表格的默认宽度为 960px，但我希望它也能够重新调整大小，就像它的宽度和高度是自动的并且它的位置是相对的一样。这些是我现在的风格

#container{
margin: 0 auto;
position: relative;
}
#content{
width: 960px;
height: auto;
box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
-webkit-box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
-mox-box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
}

如果我将#content 宽度设置为自动，则网页是完全响应的，但没有默认宽度。如果我像上面那样将其设置为 960px，则整个网页的宽度都是固定的。我已经为此苦苦挣扎了一段时间，感谢任何帮助，谢谢！

4

2 回答 2

3

尝试这个：

#content{
    max-width: 960px;
    width: 100%;
    height: auto;
    box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
    -webkit-box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
    -mox-box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
}

请注意，我已将 960 设置为max-width，但随后将 设置width为 100%。这将使网站具有响应性，但宽度仍为 960 像素（除非浏览器尺寸小于此值）。

于 2013-03-08T03:13:26.847 回答
2

我看到 albertxing 已经给了你一个很棒的答案，但我想建议你了解Ethan Marcotte - 响应式网页设计 (rwd) 的教父。

他在 Alistpart 撰写了一些很棒的文章，您可能想从这些文章开始。好东西！

于 2013-03-08T13:20:48.107 回答