在固定寬度的水平佈局中左浮動內容

我正在幫助建立她的網站的朋友。當談到網頁設計時，我自己是業餘愛好者的中間人，導致無數的挫折通常通過幾個小時的谷歌搜索解決。但這次不行。我真的很努力地找到一個現有的答案，沒有任何可用的解決方案。在固定寬度的水平佈局中左浮動內容

的一點是：Here's a working example of how far I have got yet

在「菜單」每個字母代表一個作品，點擊它們含有切換圖片/幻燈片項目的申報單。

我希望所有的項目divs自己安排水平，沒有包裝到下一行。這是與我目前的星座。
我想激活的項目浮動/自我調整到左側（儘可能多的容器div允許他們）。這只是部分工作：

當'A'被切換時，第一個項目彈出很好，並將其自身對齊到左邊。當'B'隨後被切換時，它也很好地與左邊對齊，靠在項目'A'上。接下來切換'C'+'D'也是一樣。

當您將第一個選項切換爲「D」時，問題就開始了：在這裏，您將在項目左側獲得比預期更多的空白空間。同時切換'A'然後'D'，你會在項目之間得到一個奇怪的空白空間 - 而不是我期望或想要的。

你們有什麼幫助嗎？

來源

2012-01-09 LasseLVDBC

「toggleDiv」的JavaScript在哪裏？ – FakeRainBrigand 2012-01-09 21:48:51

乾草！我剛剛添加了整個HTML - 包括jQuery .toggle（DivId）函數。有什麼想法嗎？ – LasseLVDBC 2012-01-10 08:22:52

爲什麼不一次只顯示所有圖像，並使用左側作爲瀏覽圖像的方式？ – Wex 2012-01-10 09:13:12

嘗試添加以下樣式的「.child」元素：

.child{ 
    float:left; 
    margin-right:10px; 
    display: inline-block; 
    white-space: nowrap; 
}

，並且每個項被觸發時得到母體的div（#parent）的寬度。所以每次添加項目時，寬度都會被添加到#parent的寬度，從而允許水平滾動。

希望這會有所幫助。

來源

2012-01-10 05:54:14

嗨Sagar，謝謝你的幫助。由於我的編碼知識非常有限，我不知道現在應該走哪裏。我想添加一些jQuery的行到現有的切換功能，目標是父div？ – LasseLVDBC 2012-01-10 08:45:21

首先將float：left和margin-right：10px添加到.child，看看它是否有幫助。對於保證金權利'10px'是一個測試值，您可以將其更改爲您選擇的值。要進行測試，請在'#parent'上添加10000px的寬度以測試滾動是否正常。需要發生的是，每次顯示「.child」元素時，水平div的寬度都需要相應擴展以適應新的「.child」元素。讓我知道它是否有效。 – 2012-01-10 09:33:41

這起作用。現在這些項目將自己水平對齊，而不包裝到下一行。但是，當然，當項目激活時，超出屏幕大小，scroll-x會彈出10000px的寬度，而不是項目/子項+ margin的總數nr的寬度。再次感謝！ – LasseLVDBC 2012-01-10 11:00:10

在固定寬度的水平佈局中左浮動內容

回答

相關問題