html - 显示问题 : right content cont bleeds over onto left column on mobile

Question

我的问题是，在移动设备上，右侧内容(白色背景)位于左侧内容(紫色)下方。我已经尝试使用 clear:both，但仍然没有解决问题。

我一直认为这个 CSS 是错误的:

.cont {
    width: 1000px;
    overflow: hidden
}
.cont_left {
    width: 283px;
    height: auto;
    float: left;
    vertical-align: central;
    padding-top: 25px;
    padding-left: 25px;
    padding-right: 25px;
    background-image: url(.//images/sidebar.png);
    padding-bottom: 220px;
}
.cont_right {
    width: 600px;
    padding-left: 25px;
    height: 100%;
    float: left;
    position:relative;
    font: Arial;
    font-size: 12px;
    background: #ffffff;
    padding-right: 25px;
}

实时站点:Website

问题图片:iOS Screenshot

Answer 1

也许您正在寻找 Faux Columns已讨论的技术here .此外，杰夫·格雷厄姆 (Geoff Graham) 写了一篇覆盖面很广的文章 article关于将您的布局分成两半(当然，您不需要像描述的那样达到 50 50)。

在您的情况下，我会使用上述技术之一使用百分比(内容占 70%，边栏占 30%)。请注意，vertical-align: central; 不是有效属性。 Here你可以找到一些关于如何垂直居中的信息。