展開父格寬度以適應孩子的div，表示平滾動網站

我想提出一個水平滾動畫廊風格的網站，類似這樣的： http://ericryananderson.com/book_2 展開父格寬度以適應孩子的div，表示平滾動網站

我有一個父DIV，而且DIV內是孩子的div的畫廊中的每件物品。

由於我不知道畫廊中會有多少物品/會隨時間而改變，我如何自動製作父級尺寸以使畫廊物品保持在同一條線上，從而允許內容溢出屏幕的寬度，再次像我在上面引用的網站。

它目前只表現我想要的方式，如果我手動設置寬度。

HTML：

<div class="parent-gallery-div"> 
    <div class="gallery-item"></div> 
    <div class="gallery-item"></div> 
    <div class="gallery-item"></div> 
    <div class="gallery-item"></div> 
    <div class="gallery-item"></div> 
    ... 
</div>

CSS：

.parent-gallery-div { 
    height: 500px; 
    float: left; 
    margin-top: 40px; 
} 

.gallery-item { 
    height: 420px; 
    float: left; 
    margin-right: 20px 
}

來源

2011-12-02 user1077937

嘗試使用JScrollPane的插件http://jscrollpane.kelvinluck.com/ 這裏實現，這是一個例子： http://longinstudio.pl/realizacje/reklama%20zewnetrzna

用法相對簡單，看起來好於http://ericryananderson.com解決方案。（f.e有可能控制滾動外觀和動畫效果）

來源

2011-12-02 18:04:10

我自己的網站，我的工作比例如更好，更簡單，功能更強大我給，並且你可以用鼠標滾輪水平地滾動它。對不起，我不認爲我需要使用jQuery來實現我想要的，CSS應該能夠處理它。 http://www.lethalmonk6.byethost24.com/seamscape.html – user1077937

如果你想增加高度爲自動。

試試這個代碼

<div class="parent-gallery-div"> 
    <div class="gallery-item"></div> 
    <div class="gallery-item"></div> 
    <div class="gallery-item"></div> 
    <div class="gallery-item"></div> 
    <div class="gallery-item"></div> 
    ... 
    <div style="clear:both;"></div> 
</div>

，並刪除height屬性爲「父畫廊-DIV」

來源

2011-12-03 05:44:19

我希望高度保持不變，並且內容在同一行上水平延續，因此爲什麼我需要動態擴展div寬度。這是否做到這一點？ – user1077937

展開父格寬度以適應孩子的div，表示平滾動網站

回答

相關問題