Question

我有一个标题应至少保持与下面div或更宽的一样宽。一切看起来很好，因为窗口比内容大，但是当窗口变小时，顶部div也是如此。

#top{

    border:1px solid black;
    height:200px;
    width:100%;

}
#content{
    margin:auto;
    width:1000px;
    height:600px;
    border:1px solid red;
}

<body>
<div id="top"></div>
<div id="content"></div>
</body>

有什么建议吗？

http://jsfiddle.net/Z242Y/

Answer 1

我相信你的问题在于内容的固定宽度，因为顶部div具有百分比宽度，所以要修复只是将内容div更改为像我一样小一点的宽度，我设置它达到80％

#content{
margin:auto;
width:80%;
height:600px;
border:1px solid red;
}

这是您更新的FIDDLE

希望有所帮助。

Answer 2

首先，您可以将html包装在容器中：

<div id = "divContainer">
    <div id="top"></div>
    <div id="content"></div>
</div>

然后，您可以给它一个固定的宽度，以便它决定其包含元素的宽度。这样，top和content div将始终具有相同的宽度。

为此，你需要你的CSS：

#divContainer {
    width: 1000px;
}
#top {
    border:1px solid black;
    height:200px;
    width:auto;
}
#content {
    margin:auto;
    height:600px;
    border:1px solid red;
}

您可以在此处查看：http://jsfiddle.net/G4L4V/

注意：在这种方法中，两个div总是具有相同的宽度。

如果您想要强制执行1000px宽度并且内容宽度仍然小于顶部div，那么您可以在#content类中稍作调整：

#content {
    margin:auto;
    width:90%;
    height:600px;
    border:1px solid red;
}

Answer 3

当你在CSS中为元素赋予100％的宽度时，你基本上使这个元素的内容区域完全等于其父元素的显式宽度 - 但前提是它的父元素具有明确的宽度。

尝试使用javascript设置#top的宽度。

var x = $('#content').width();
$('#top').width(x);

JS Fiddle

保持标题宽度至少为内容宽度的100％

3 个答案: