CSS：位置：绝对右侧，无水平滚动

发布于 2024-10-21 04:00:58 字数 404 浏览 5 评论 0原文

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

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

它本质上是一个 3 列 div 布局，如果页面无法容纳左列和右列，它们将被隐藏。

我已经让左栏完全按照我想要的方式工作，如果它不适合页面，它不会改变水平滚动条。我的问题出在右栏。因为负保证金权利并不以同样的方式发挥作用。

有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不知所踪 2024-10-28 04:00:58

@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/

一般来说您想要实现的目标是调用响应式网页设计。 A List Apart 有一篇很棒的文章，您可以找到信息丰富的文章：http://www.alistapart。 com/articles/responsive-web-design/

@RoToRa is correct for the media. A possible css for your layout could be the following:

@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;}
}

When the screen's width is 580px then hide .featured-box-left. If the Screen is 480px or lower then hide both left and right.

Demo: http://jsfiddle.net/LwRva/6/

Generally what you are trying tou achieve is call Responsive Web Design. A List Apart has a great article you can find informative: http://www.alistapart.com/articles/responsive-web-design/

回复收藏 0 原文

~没有更多了~