Question

我有一个网站，我希望在浏览器窗口大小调整时使用与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;
}

然而，当我调整浏览器Window的大小时，它的行为与Stackoverflow不同，Stackoverflow似乎是浮动的，并根据浏览器窗口大小自动降低边距。

由于

Answer 1

第1步

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

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

第2步

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

Answer 2

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

动态页边距CSS

2 个答案: