Question

我正在尝试将div标题放在我网站的顶部。我需要它是页面宽度的100％。

问题在于，当我调整浏览器窗口大小时，div也会调整大小......

我试过了：

#head   {
    height: 120px;
    background: url('../images/head.jpg') repeat;
    margin: 0px auto;
    width: 100%;
}

而且：

#head   {
    height: 120px;
    background: url('../images/head.jpg') repeat;
    margin: 0px auto;
}

两种方式都不起作用。

#head   {
        height: 120px;
        background: url('../images/head.jpg') repeat;
        margin: 0px auto;
        width: 1100px;
}

这很有用。但我需要宽度为页面的100％，所以它不会帮助我。

我该如何解决？谢谢！

Answer 1

如果使用块级元素width: 100%;，则使用div时，第一个块显然会调整大小，因为它需要整个水平空间，因此您无需定义100%默认情况下。

现在在第二个块中，它将不起作用，因为您尝试使用margin: auto;来居中块级元素，但未定义任何width。

第三项有效，因为您定义了width margin: auto;以及width。

那么现在该如何解决这个问题？

使用100%元素在width margin: auto;元素中嵌套固定的<div class="full_width"> <div class="center_me"></div> </div>元素，您的问题将得到解决。

Demo

<强> HTML

.full_width {
    background: #aaa;
    min-height: 100px;
}

.center_me {
    background: blue;
    min-height: 100px;
    margin: auto;
    width: 300px;
}

<强> CSS

{{1}}

当屏幕重新调整大小时，Div移动

1 个答案:

那么现在该如何解决这个问题？