Question

我在这里有一个这种布局的演示：http://jsfiddle.net/LwRva/

我想要实现的是大多数用户的宽度为680px的布局，但对于那些使用较小分辨率的用户，只有480px - 没有水平滚动条。（想象一下680px实际上是1180px，480px是980px - 只是在JSFiddle中使用它。）

它本质上是一个3列div布局，如果页面无法适合它们，则会隐藏左右列。

我已经让左列完全按照我想要的方式工作，如果它不适合页面，它不会改变水平滚动条。我的问题在于正确的专栏。由于负边际权利不起作用这一事实。

有什么想法吗？

Answer 1

@RoToRa对于媒体是正确的。布局的可能css可能如下：

@media screen and (max-width: 580px) {.featured-box-left {display:none} }
@media screen and (max-width: 480px) {
.featured-box-left,.featured-box-right{display:none;}
}

当屏幕宽度为580像素时，隐藏.featured-box-left。如果屏幕是480px或更低，则隐藏左右两种。

演示： http://jsfiddle.net/LwRva/6/

一般来说，您尝试实现的目标是致电Responsive Web Design。 List Apart有一篇很棒的文章，你可以找到提供信息：http://www.alistapart.com/articles/responsive-web-design/

CSS：位置：绝对右侧没有水平滚动

1 个答案: