以下是我网站的主要容器,侧面和卡片容器。
当我调整窗口大小时,它们会移动并自行调整大小,然后彼此堆叠,我希望它们保持相同的大小,只是有一个水平滚动条。
.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;
}
最佳答案
也会帮助您查看相关的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。您将需要4000像素的宽度(如果是这种情况)同时包含.side和.card。
尝试对所有3个元素使用box-sizing:border-box,并使用基于百分比的边距和可能的填充。
关于css - 调整窗口大小时,分隔线会更改大小并奇怪地移动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50594162/