html - Div 在 iPad 中无法准确响应

Question

我在 iPad 上显示网页时遇到问题。在 iPad(横向模式)中查看时，最后一个 div 在底部跳出。请看下面的截图

这是 CSS。

div .container-home
{
    float: left;
    width: 290px !important;
    padding: 20px;
}

img.section-icon
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    max-height: 150px;
}

h2.section-head
{
    text-align: center;
    line-height: normal;
    font-size: 22px;
}

p.section-description
{
    text-align: center;
}

如果有任何帮助，我将不胜感激。

非常感谢!

Answer 1

您是否包含视口(viewport)？这是因为向左浮动，它们加在一起的宽度大于显示。您将它们的宽度定义为 290 像素以及 20 像素的填充，这意味着它们是 330 像素，您至少需要 1320 像素的显示宽度。

尝试为它们使用网格系统或给它们一个以百分比为单位的宽度值。如果您不知道使用什么网格系统，我推荐 Skeleton，因为它很轻。

编辑:不要使用 !important，因为那样你就不能再更改该值了!important 将覆盖任何其他规则