CSS 3列布局更改换行宽度

Question

我有一个3列的布局，就像这样……

#column1{ float:left; width:40%; min-width:265px;}
#column2{ float:left; width:30%; min-width:245px;}
#column3{ float:left; width:30%; min-width:245px;}

目前，当浏览器窗口缩小到超过某个阈值时，column3就会被强制放到下一行。当发生这种情况时，我希望将column2扩展到60%，并将下一行的column3扩展到100%。

我不是在寻找Javascript解决方案，我很确定我可以自己做，但我发现CSS更容易维护。

此外，我需要支持IE8-10，但没有SCSS可用。

谢谢!

Answer 1

当浏览器宽度较小时，使用media queries并使用不同的样式。

@media (max-width: YYYpx) { ... }

Answer 2

类似于：

@media all and (max-width: 755px) {
    #column1 { width: 40%; }
    #column2 { width: 60%; }
    #column3 { width: 100%; }
}

应该行得通。查找媒体查询，您可以过滤屏幕高度，宽度和媒体类型屏幕打印等。