Question

以下是我网站的主要容器，侧面和卡片容器。当我调整窗口大小时，它们移动并调整大小并叠加在一起，我希望它们保持相同的大小并且只有一个水平滚动条。

.main {
    width: 75%;
}
.side {
    background-color: #232323;
    border-left: 4px solid #395d9e;
    float: left;
    width: 16%;
    padding: 57px 15px;
    height: 100%;
}
.card {
    float: left;
    background-color: #232323;
    padding: 0 15px;
    margin: 80px 0 0 20px;
    padding: 15px;
    width: 82%;
    border-radius: 4px;
}

Answer 1

也可以看到你的相关html，但是你有一些事情在这里发生。首先，.main，.side和.card的总数为173％。如果.card在.main或.side。

之内，这可能无关紧要

接下来，考虑使用css属性box-sizing:border-box。在CSS中，宽度计算为（元素宽度+填充+边框+边距）的总和。使用边框，填充和边框被视为总宽度的一部分。换句话说，对于.side，16％将包括你的15px左右填充。

最后，即使使用边框，左右边距也会影响总宽度。如果.card和.side都位于.main内，您可以将.card的右边距设置为百分比（例如margin: 80px 0 0 2%;）和.side元素的百分比。

这里发生的事情是当您将浏览器窗口调整为较小的宽度时，固定的填充和边距会强制您的元素浮动到其他元素之下。假设.side和.card在.main中，它们的声明宽度总计为98％+ 80px。您需要（如果是这种情况）宽度为4000px以包含.side和.card。

尝试对所有3个元素使用box-sizing：border-box，并使用基于百分比的边距和可能的填充。

当窗口调整大小时，我的分隔符会改变大小并且奇怪地移动

1 个答案: