显示问题:在移动设备上，右边的内容继续到左边的列

Question

我的问题是，在移动设备上，右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;
}

现场网站：网站

问题图片：iOS屏幕截图

Answer 1

也许您正在寻找Faux-Columns技术，这里已经讨论过了。此外，Geoff Graham写了一篇关于将布局一分为二的文章（当然，你不需要像描述的那样达到50/50）。

在你的情况下，我会使用上面提到的技术之一，使用百分比（内容为70%，侧栏为30%）。请小心，因为vertical-align: central;不是有效的属性。在这里你可以找到一些关于如何垂直居中的信息。

Answer 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;
}

这将修复