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.
精彩评论