流体布局。 2列。当浏览器窗口变窄时,让一个变得更窄

时间:2012-10-04 19:00:30

标签: css layout user-agent fluid-layout two-columns

考虑以下布局:

有两列设置了min-widthmax-width(每个列都不同)。当用户代理变窄时,右列开始变窄,而左列保持初始宽度。在右列位于min-width后,左侧列开始变得更窄,直到它位于min-width

是否可以仅使用CSS实现此效果?如果是这样,怎么样?

1 个答案:

答案 0 :(得分:1)

如果您使用media queries,则可以这样做。

在基本样式的左列上放置一个静态宽度。然后在媒体查询中,在某个屏幕宽度变为活动状态,例如:@media all and (max-device-width: 460px), (max-width: 460px),给它一个较小的min-width

“特定屏幕宽度”应该是右列达到最小宽度的屏幕宽度。

此处示例:http://jsbin.com/ivodam/1/edit