3

我有一个网站，我希望在其中具有与 Stackoverflow 类似的关于浏览器窗口调整大小的布局。

所以我有以下CSS：

#site-container {
    margin: 0px auto;
    text-align: left;
    width: 100%;
    zoom: 1;
    position: relative;
}

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 81.25%;
    background-color: #fbf9ef;
}

#div-menu {
    display: inline;
}

#header {
    width: 990px;
    height: 80px;
    margin-left : 127px;
    margin-right : 127px;
    margin-bottom: 12px;
    margin-top: 20px;
    border-bottom: 1px solid #c0c0c0;
}

#content {
    width: 990px;
    margin-left : 127px;
    margin-right : 127px;
}

但是，当我调整浏览器窗口的大小时，它的行为不像 Stackoverflow，不知何故 Stackoverflow 似乎是浮动的，并根据浏览器窗口的大小自动减少边距。

谢谢

4

2 回答 2

3

第1步

将#site-container元素的宽度设置为固定值（例如990px），而不是100%. 目前，它会自动填充窗口，不留余地。StackOverflow 使用固定值980px. 我相信您的网站使用990px.

或者，您可以将容器设置为具有类似表格的布局display:table;。这样，它将根据其内容的宽度动态拉伸。在这种情况下，不需要任何width声明。

第2步

从您的#header和#content元素中删除固定边距。它们是多余的并且扭曲了整个布局的位置。父母#site-container将有足够的保证金为他们俩。

于 2013-09-14T14:21:57.743 回答
1

您应该使用margin-left: auto; margin-right: 0使块元素居中，而不是固定边距值。

于 2013-09-14T14:03:28.143 回答