Question

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

Answer 1

也许您正在寻找已经讨论Faux Columns的here技术。此外，杰夫·格雷厄姆写了一篇关于将你的布局分成两半的很好的article（但当然，你不需要按照描述去50 50）。

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

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

这将解决它

显示问题：正确的内容缩小到移动设备上的左列

2 个答案: