2列固定寬度側欄，流體內容沒有正確對齊

我一直在遇到這個問題，用於設置2列布局，固定側欄浮動到右側。我在內容容器上設置了一個邊距，以便在您調整瀏覽器窗口大小時保持流暢。2列固定寬度側欄，流體內容沒有正確對齊

但是，內容部分實際上位於側邊欄「上方」，因此新內容會將側邊欄向下推送至頁面。您可以看到我爲基本佈局設置的。

我知道解決此問題的唯一方法是將邊欄移到HTML標記中的內容上方。但是這並不是一個真正的解決方案，並且說實話，我希望我的內容能夠出現在側邊欄之前，因爲這就是文檔的結構。有沒有什麼辦法可以將浮動邊欄與內容區域頂部對齊？

來源

2012-09-15 Jake

看一看媒體對象http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

演示：http://dabblet.com/gist/3729182

既然你沒有爲列提供的寬度，我用我自己的百分比。您可以使用媒體查詢來清除邊欄太細的邊欄。

來源

2012-09-15 18:32:51 carpenumidium

我更新了一個[新dabblet]（http://dabblet.com/gist/3730082），它更好地展示了我目前的問題。右邊欄應該寬度爲250像素。請注意，如果您在左側div上方剪切/粘貼右側div，它將完美懸浮，否則會落在下面。 – Jake

這是因爲您從左列刪除了浮點數，並將其恢復爲其默認屬性「display：block」，因此右列清除。右列不要求'float：right'，因爲它被賦予'overflow：hidden'，更多細節在我提供的媒體對象鏈接中。它非常值得一讀，並可以避免重複代碼。但是既然你想保存源代碼順序，你可以將這些列包裝在一個.container中，並用一些小技巧做出流暢的網格：http://dabblet.com/gist/3730377。 – carpenumidium

這裏發生的事情是，.container有一個等於右列寬度的'padding-right'右列給出'右：-100％'，將其拖到填充區域。這不一定是壞習慣，但我們必須處理這些黑客，直到我們掌握'calc（）'和'flexbox'。 – carpenumidium

2列固定寬度側欄，流體內容沒有正確對齊

回答

相關問題