开发者

CSS: Hide a column when the width decreases

Check out: http://thinkvitamin.com/

As you decrease the browser size, at some point the right column simply disappears. Pretty nice downgrading, and this makes for quite a flexible design. I do not see, however, any special CSS going on. Is this Jav开发者_如何学编程ascript, or can this somehow be achieved with CSS only?


This is being done with pure CSS, namely with CSS3's Media Queries.

The spec: http://www.w3.org/TR/css3-mediaqueries/

A tutorial: http://webdesignerwall.com/tutorials/css3-media-queries

Browser support: http://caniuse.com/css-mediaqueries (works "everywhere" except IE8 and lower)


The reason that the sections on the right disappear is because they have this on their css:

width: 24%;
float: right;

if the width would have been set to a fixed width the sections would have dropped to the bottom of the article.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜