CSS：位置：绝对的权力没有水平滚动

我有这样的布局在这里的演示：http://jsfiddle.net/LwRva/CSS：位置：绝对的权力没有水平滚动

我试图做到的，是一个布局是680像素宽对于大多数用户，但只有480像素 - 无对于那些使用较小分辨率的水平滚动条。（Imagine 680px实际上是1180px，而480px是980px - 仅仅用于在JSFiddle中使用这个）。

它本质上是一个3列的div布局，其中如果页面不适合他们，左右栏就会隐藏。

我已经有了完全按照我想要的那样工作的左列，它不会改变水平滚动条，如果它不适合页面。我的问题是在右栏。由于消极保证金权利不以相同方式运作。

任何想法？

来源

2011-03-09 Kobius

只是一个快速的建议：你有没有考虑CSS3媒体查询？这可能更容易：http://www.w3.org/TR/css3-mediaqueries/ – RoToRa

@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。列表除了有一个伟大的文章，你可以找到翔实的：http://www.alistapart.com/articles/responsive-web-design/

来源

2011-03-09 11:29:00 Sotiris

天才！非常感谢你们。我之前没有使用这些媒体查询，但它们非常有用。谢谢！ – Kobius

@Kobius欢迎您:) – Sotiris

CSS：位置：绝对的权力没有水平滚动

回答

相关问题