html - 两列响应式网站问题

Question

我正在尝试将现有网站转换为响应式网站，但是有一件事我正在努力解决:

http://www.brandonsuffolk.com

当您调整窗口大小时，我希望右列挤压左列，但此时它会掉到下面(但是一旦屏幕碰到另一个左 div，它就会改变)。

当我使用单个 div 时它可以工作，但是一旦我在其中添加一个新的 div，它就无法正常工作。

这是相关的 CSS:

.MainOuter {
    float: left;
    width: 100%;
}
.MainWrapper {
    max-width: 980px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
}
.ColumnRight {
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 20px;
    float: right;
    width: 290px;
    padding: 0px;;
}
.ColumnLeft {
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    float: left;
    width: auto;
    max-width: 670px;
    padding: 0px;
}

Answer 1

恐怕您正在与正常的响应过程作斗争。响应应该做它正在做的事情。如果您不希望它落在下面，请找到此元素的@media 并将其更改为:

@media (min-width:0px) {
    width:50%;
}

这可能有帮助