html - 为什么 DIVS 会随着窗口尺寸的减小而崩溃？

Question

我不知道为什么我的 HTML 页面中的文本在菜单中折叠，在这里您可以在 jsfidle 中找到我的页面.

我的一些 HTML 文件:

<div class="menu">
    item 1
    item 2
    ...
</div>
<div class="content">
    text text text
</div>

我的一些 CSS 文件:

.menu{
float: left;
padding-top: 100px;
width: 20%;
position: relative;
}
.content{
float: right;
padding-top: 100px;
width: 80%;
color: #dddddd;
position: relative;
}

是宽度%的css问题吗？还是别的？

Answer 1

您将 .menu 和 .content 定义为 20% 和 80% 的宽度窗口 - 您的容器大小合适。

但是，您在 .grezzo 节点上设置了 150px 的宽度和 30px 的填充，这导致它们向外扩展.menu div(如果窗口太小)

尝试删除 .grezzo 上的宽度