html - 页面中的 CSS 在移动网站上溢出

Question

有问题的站点是:

http://www.thewaterqualitysolution.com/

我为列使用的 css 代码是:

.column1,
.column2,
.column3,
.column4
{
    column-rule-width: medium;
    width: 282px;
    max-width: 24%;

}

.column1,
.column2,
.column3
{
    float: left;
    margin-right: 24px;
    max-width: 24%;
}

.column4
{
    float: right;
    max-width: 24%;
}

为什么他们不留在边界内？

Answer 1

查看站点，您已经为列声明了两次 CSS 规则。您的第二个声明会覆盖第一个。强制所有列的宽度为 282px。请参阅 default.css，第 510 行。

另外，我建议您阅读这篇文章，以便更好地理解 CSS 宽度和最大宽度。

CSS: Width and Max-Width