當瀏覽器小於內容時添加空白

我有一個很奇怪的問題，我剛剛注意到我正在爲一個朋友的wordpress主題工作，並且我使用相對/絕對位置來添加社交/連接按鈕在一些divs的一側 - 哪些工作正常，以得到正確的設計。當瀏覽器小於內容時添加空白

但是，該問題出現在頁面右側的「Social」div上。如果瀏覽器比主內容的尺寸小，它會在頁面的右側添加額外的空白區域。如果我把div移到左邊，那很好;它只在頁面長度的一半處添加空白（這更加令人困惑）。

我不能爲了我的生活找出爲什麼會發生這種情況;我無法弄清楚這是一種標準行爲還是我自己創建的問題。

我希望這裏的某個人可能有類似的經歷，或者只是一個想法如何解決它。

參考該網站是http://betacreations.com/example/uberpotato

編輯：爲#social DIV的CSS是：

#social{ 
    width: 90px; height: 250px; 
    padding: 10px; 
    position: absolute; right: -40px; top: 40px; 
    background: #EFEFEF; 
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);}

它駐留在＃頁面的內容的div的CSS是：

#page-content{ 
    clear: both; 
    min-height: 500px; 
    width: 870px; 
    margin: 0 auto; 
    padding: 20px 0; 
    position: relative; 
    border: 5px solid #FFF; 
    background: #F2F0D7;}

而截圖是：
Issue

只有當瀏覽器的寬度小於960px（內容的寬度）時，寬度纔會存在

在此先感謝！

來源

2013-02-16 Bitwize

請發表問題的html和css。並且爲了上帝的緣故，請閱讀關於如何發佈問題並遵循它們的指導原則。謝謝 – Shail 2013-02-16 02:34:06

張貼截圖plz，據我瞭解..你可以解決它寫媒體查詢不同大小的屏幕和resolutions.As問題出現時，你調整大小。 – Shail 2013-02-16 02:39:06

完成，對不起。由於沒有發佈代碼/圖片，我怎麼沒有遵循指導原則？ – Bitwize 2013-02-16 02:55:13

查看您的網站後，它看起來像是您的社交平板。一些生成的元素是100px或更寬。如果你刪除width:90px;，你可以看到它想要達到的寬度。你可以枯萎修訂這些元素並設置其寬度小（或100％或諸如此類的東西），或者你可以申請overflow: hidden;到#social DIV：

#social { 
    ... 
    overflow:hidden; 
}

爲什麼這種情況發生的原因是因爲你有溢了出來，你的社交容器。它只發生在右側，因爲這些元素是左對齊的。（你也可以將元素對齊到我想的）。

希望有幫助。

來源

2013-02-16 03:13:28

完美的作品，非常感謝！我只是想出了（正如上面的評論），它是從某種程度上來自Facebook的'like'按鈕，但不知道爲什麼。我很擔心我做錯了什麼樣的東西。謝謝！：D – Bitwize 2013-02-16 03:16:53

@Bitwize太棒了！我會說很高興幫助，但看起來你不需要我的幫助。 XD快樂編碼。 :) – 2013-02-16 03:19:19

就我所瞭解的 - 您希望您的模板具有響應能力。爲此，您需要編寫媒體查詢以迎合各種媒體大小和分辨率。

/* Large desktop */ 
@media (min-width: 1200px) { ... } 

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { ... } 

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 

/* Landscape phones and down */ 
@media (max-width: 480px) { ... }

爲不同大小寫css樣式，你可以讓你的網站看起來像你想要的樣子。

來源

2013-02-16 03:08:27 Shail

這不會幫助。這是一個社交元素的佈局錯誤。 – 2013-02-16 03:09:14

@約瑟夫：我很高興你能明白，我真的不覺得我那麼糟糕。你說得對，這是一個佈局問題。原來，這似乎是從我的Facebook的'喜歡'按鈕 – Bitwize 2013-02-16 03:13:22

嗯，我真的不能真正重現你遇到的問題和調整大小的空間讓我在一個完全不同的頁面。很高興你得到了答案。 – Shail 2013-02-16 03:18:22

當瀏覽器小於內容時添加空白

回答

相關問題