html - CSS:位置:没有水平滚动的绝对右

Question

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

我想要实现的布局对于大多数用户来说是 680 像素宽，但对于那些使用较小分辨率的用户来说只有 480 像素 - 没有水平滚动条。 (假设 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;}
}

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

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

通常您要实现的目标是调用 Responsive Web Design . A List Apart 有一篇很棒的文章，您可以找到有用的信息:http://www.alistapart.com/articles/responsive-web-design/