动态页面边距 CSS

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;
}

然而，当我调整浏览器窗口大小时，它并不像Stackoverflow那样表现，不知何故，Stackoverflow似乎是浮动的，并根据浏览器窗口大小自动减少边距。

谢谢。

- user2779312

Answer 1

步骤1

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

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

步骤2

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

- Boaz

Answer 2

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

- Itay

---

但是Stackoverflow右侧也有一个边距。将右侧的边距设置为0，容器将保持粘在浏览器窗口上。 - user2779312

另一种可能性是将右和左的边距设置为自动，并且还要在左右两侧设置固定填充。 - user2779312

我没有说要设置 margin: 0，我说的是 margin-left / margin-right: auto;。这是最常见和传统的做法。不需要使用 padding。 - Itay