css - 为什么 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

您正在定义.menuand .contentas being20%和窗口80%的宽度- 您的容器大小正确。

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

尝试删除宽度.grezzo

Answer 2

这是因为您的左侧 div 的内容比容器更突出。因此，您的 text(right) div 实际上就像它应该的那样正对左 div，但是按钮从左 div 延伸出来。

要解决这个问题，您要么需要调整按钮图像的大小，要么让左侧 div 自动调整大小以容纳它们，而右侧 div 只占用所有剩余空间，如此处所述。

希望这对你有帮助！

Answer 3

删除您float: left;的菜单元素。此外，如果您删除您width的.contentand .menu，它们的文本将不会覆盖菜单。