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% 窗口的宽度 - 您的容器尺寸正确

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

尝试删除.grezzo

上的宽度

Answer 2

这是因为您的左侧div具有比容器更突出的内容。因此，你的文本（右）div实际上正对着左边的div，就像它应该是的那样，但按钮是从左边的div延伸出来的。

要解决此问题，您需要调整按钮图像的大小，或者让左侧div自动调整大小以保持它们，右侧div只需按照here所述的所有剩余空间。

希望这能帮到你！

Answer 3

删除菜单元素上的float: left;。此外，如果您移除了width和.content上的.menu，则其文字不会覆盖菜单。

为什么DIVS会因窗口尺寸缩小而崩溃？

3 个答案: