显示问题：右侧内容流到移动设备的左侧列答案

【问题标题】：Display issue: right content cont bleeds over onto left column on mobile显示问题：右侧内容流到移动设备的左侧列
【发布时间】：2015-03-18 12:27:48
【问题描述】：

我的问题是，在移动设备上，右侧 cont（白色背景）位于左侧 cont（紫色）下方。我尝试过使用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

【问题讨论】：

标签： html ios css mobile

【解决方案1】：

也许您正在寻找Faux Columns 技术，该技术已在here 中讨论过。此外，Geoff Graham 写了一篇很好的报道 article 将你的布局分成两半（当然，你不需要像描述的那样去 50 50）。

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

【讨论】：

感谢您的链接/提示。
随时。如果答案对您有所帮助，请记得点赞。

【解决方案2】：

所以它只是左侧的 css 是错误的。你有重复的bg图像。重复的图像的顶部是白色的，所以看起来右侧正在流血......

.cont_left {
  background-color: #23265d !important;
  background-image: url(".//images/sidebar.png");
  background-position: left top;
  background-repeat: no-repeat;
  float: left;
  height: auto;
  padding: 25px 25px 220px;
  width: 283px;
}

这会解决它

【讨论】：

很遗憾，这还没有解决。我已使用此 CSS 更新了实时网站，但移动设备仍然存在问题。
可能会清除您的手机浏览器缓存。紫色一直到底部。
请问是什么手机/浏览器？我正在使用 iPhone 5s - Chrome 浏览器查看。
三星 s5 中的 Safari n chrome