没有滚动条的背景的 Div 容器

发布于 2024-12-29 02:24:44 字数 669 浏览 1 评论 0原文

我已经将样式表设置为有一个容器（#container）来容纳页眉/内容/侧边栏/页脚/等，并将其放入主包装器（#mainwrapper）中。我想要达到的效果类似于 College Humor 的网站；旁边的广告。我想在容器的左侧和右侧有一个分区。我所做的就是像这样设置它。

<div id="mainwrapper">
<div id="leftwall"></div>
<div id="container"></div>
<div id="rightwall"></div>
</div>

基本上，我希望能够在左墙和右墙 div 中放置图像（或背景图像），但是，我不希望它触发 x 滚动条。我只希望它在观看者的分辨率足够高时可见。否则，只显示#container。

我已将它们设置为 float: left，以便它们出现在容器的左侧和右侧，但我对如何使它们显示为背景图像感到困惑。

我想这样做的原因是我已经有了背景图像并且我想保持它的优化。因此，我可以拥有 2 个 100 像素宽的图像，而不是跨越 960+ 像素（#container 宽度）的大图像。（#leftwall 和 #rightwall 的宽度）

我希望这是可以理解的，并感谢任何提前提供帮助的人！

祝你有美好的一天，布莱恩。

原文

I've set up my stylesheet to have a container (#container) holding the header/content/sidebars/footer/etc and I've put that in a main wrapper (#mainwrapper). The effect I'm trying to achieve is similar to College Humor's website; the ads on the side. I'd like to have a division on the left and right of the container. What I've done is set it up like this.

<div id="mainwrapper">
<div id="leftwall"></div>
<div id="container"></div>
<div id="rightwall"></div>
</div>

Basically, I want to be able to put an image (or bg image) in the leftwall and rightwall divs, however, I don't want it to trigger the x-scrollbar. I only want it visible if the viewer's resolution is high enough. Otherwise, just display #container.

I've set them to float: left, so that they appear on the left and right of the container, but I'm a stuck as to how to make them appear as a background image.

The reason I want to do it this way is that I already have a background image and I want to keep it optimized. So, instead of having a large image that spans 960+ pixels (#container width), I can have 2 images that are 100px wide. (the width of #leftwall and #rightwall)

I hope this is understandable and thanks to anyone trying to help in advance!

Have a good day, Brian.

分享到QQ

分享到微博

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

发布评论

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

感受沵的脚步 2025-01-05 02:24:44

我明白你想要什么。如今，已经添加了新的媒体查询来进行此类设计。

您可以在 css 文件中为特定分辨率或移动设备定义它。

@media screen and (min-width: 1080px){
#leftwall, #rightwall{display:block;}
}

@media screen and (max-width: 1024px){
#leftwall, #rightwall{display:none;}
}</pre>

下面是您可以了解如何使用这些查询的链接。
http://coding.smashingmagazine.com/2011/ 01/12/guidelines-for-responsive-web-design/

希望这有帮助，
干杯，

I understand what you want. These days new media queries has been added to make these type of design.

You can define it in your css files for a particular resolution or mobile devices.

@media screen and (min-width: 1080px){
#leftwall, #rightwall{display:block;}
}

@media screen and (max-width: 1024px){
#leftwall, #rightwall{display:none;}
}</pre>

Below is the link where you can learn how to use these queries.
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Hope This Helps,
Cheers,

回复收藏 0 原文