css - 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 (max-width: YYYpx) { ... }

Answer 2

就像是：

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

应该管用。查找媒体查询，您可以按屏幕高度、宽度和媒体类型屏幕打印等进行过滤。