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容器

回答

相關問題