bg没有滚动条的div容器

我已经设置了我的样式表，让容器（#container）持有标题/内容/边栏/页脚/等，我已经把它放在主包装器（#mainwrapper）。我试图达到的效果与College Humor的网站类似，广告在旁边。我想在容器的左侧和右侧分区。我所做的就是像这样设置它。bg没有滚动条的div容器

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

基本上，我希望能够把图像（或背景图片）在leftwall和rightwall div的，但是，我不希望它触发的X滚动条。如果观众的分辨率足够高，我只希望它可见。否则，只显示#container。

我已经将它们设置为float：left，以便它们出现在容器的左侧和右侧，但我坚持如何使它们显示为背景图像。

我想这样做的原因是我已经有一个背景图像，我想保持它的优化。因此，我可以拥有100像素宽的2张图像，而不是拥有960像素（＃容器宽度）的大图像。（#leftwall和#rightwall的宽度）

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

祝你有美好的一天，Brian。

来源

2012-01-23 itsbc

**我只希望它可见，如果观众的分辨率足够高。否则，只显示＃容器。** 我认为你需要使用一些JS来实现这一点。 –

是的，这就是我所想的。我能够实现和修改JavaScript，但我从来没有试图从头开始创建脚本。知道可能涵盖此的任何教程？我甚至不知道要开始搜索什么关键字。 – itsbc

我不知道你想达到什么;也许你可以展示你的CSS看起来如何，但是你有没有尝试给外部容器赋予最小宽度？

来源

2012-01-24 15:48:40 rodedo

假设您的显示器只能跨越960像素的宽度。我只希望#container div可见而没有水平滚动条，但是，如果您有一个跨越1080 + px宽度的显示器，那么我希望显示广告容器（#leftwall #rightwall）。 – itsbc

我设置了什么，我想你想实现的，你只需要改变一些数字，以满足您的需求小提琴：http://www.jsfiddle.net/KrfVR/14/

调整结果框的大小来见一面divs出现/消失。

来源

2012-01-26 15:38:12

我绝对认为这是正确的方向。你在小提琴中创建的东西似乎工作得很好，但是我在执行代码时遇到了一些麻烦。我重命名了所有内容并设置了维度，但我似乎做了一些错误的事情。左边叫做“#leftwall”，是150px，右边是“#rightwall”，也是150px。中间被称为“#wrapper”，容器是“#mainwrapper”。 #wrappers宽度是960px，主包装是1260px。非常感谢您已经提供的帮助。 – itsbc

我可能应该提到，我的小提琴是使用jQuery的情况下，你不知道。如果你还没有添加它，那肯定是问题1。否则，只需更改#left，#middle等和数字以反映您的网站。如果您有任何其他问题，请告诉我。 –

我明白你想要什么。现在新增媒体查询已被添加到制作这些类型的设计中。

您可以在您的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/

希望这有助于干杯，

来源

2012-03-26 12:32:43 user1163513

我目前正在工作，但只要我回家，我会试试看，看看我能否正常工作，并确保选中你的答案。感谢您的回应！公元前。 – itsbc

bg没有滚动条的div容器

回答

相关问题