push divs past page edge

我正在爲包含來自各個城市的天際線的網站構建標題。爲了便於更改顯示的城市，我爲每個城市設計了一個獨特的分區，我可以將其放入標題中。我爲每個div設置背景圖像，然後像這樣一個接一個地定位它們。push divs past page edge

<header> 
    <div class='skyline'> 
    <div id='la'></div> 
    <div id='seattle'></div> 
    <div id='paris'></div> 
    <div id='chicago'></div> 
    <div id='london'></div> 
    </div> 
</header>

我遇到的問題是最後一個將從頁面中刪除，在右邊緣留下空白。我希望它們能夠流過屏幕的邊緣，以便用戶能夠看到任何適合其窗口寬度的內容。我的CSS看起來是這樣的：

.skyline { 
    background: #fff; 
    background-position: 0px 0px; 
    overflow: hidden; 
    height: 113px; 
    width: 100%; 
} 
.skyline div { 
    display: inline-block; 
    height: 113px; 
    float: left; 
    overflow: visible; 
} 
.skyline #la { 
    width: 320px; 
    background-image: url('/img/skyline/la.png'); 
}

所有其他的div都有相同的CSS，只是不同的源圖像和寬度。

我把這個（修改）jsfiddle來演示我得到的行爲。只是調整窗口大小顯示正在發生的事情。

我能做些什麼來解決這個問題？我打算改變一下html結構，但如果可以保持它一樣，我將不勝感激。

來源

2012-08-26 Paul Hoffer

您必須設置包含元素overflow: hidden;，使其不顯示水平滾動條，你必須指定容器的總寬度爲那些浮動的div讓他們全力以赴向右邊的路。否則，他們會被推倒。你可以使用絕對位置來反擊，但我認爲這個解決方案更簡單。

像這個^ h ttp://jsfiddle.net/xLwML/17/

來源

2012-08-26 20:21:20

這是我的問題，我設置了標題'overflow：visible'來顯示底部的方塊陰影。在隱藏溢出之後，我通過使用填充和負邊距來獲得陰影。我嘗試使用'overflow-x：hidden;溢出 - Y：可見;'，但沒有按預期工作。任何想法爲什麼？ –

頭上的overflow-x對我有用。你沒有想到的是什麼？ –

我可以將溢出完全關閉或完全打開。 [這是我的更新]（http://jsfiddle.net/phoffer/xLwML/24/） –

試試這個

.skyline { 
    background: #fff; 
    background-position: 0px 0px; 
    height: 113px; 
    width: 1000px; /* Changed from 100% & removed overflow */ 
}

來源

2012-08-26 19:14:53 Krishna

你可以用'comment'強調八方，比如'/ * <----- * /'或'// <---':) –

是啊..改了。謝謝。 – Krishna

除非我將值設置得足以適合延伸過屏幕的div，否則這種做法不起作用。但是，這會創建一個水平滾動條，我不想要。 –

push divs past page edge

回答

相關問題