響應式設計和粘滯div

我有一個雙列布局。如果某個屏幕尺寸被滿足，它們會中斷，以便所有內容都顯示在一列中。這就是爲什麼這些元素的排序對於確保在用較小的屏幕查看時首先顯示正確的元素很重要。響應式設計和粘滯div

這個設置的問題是，第二個「被製作成粘性」的 - 元素沒有正確地漂浮，而是在一些位於中間的位置。

 .main { 
      width: 60%; 
      margin-right: 5%; 
      float: left; 
     } 
     aside { 
      width: 35%; 
      float: right; 
     }  

    <section class="main">Header</section> 
    <aside>picture</aside> 
    <aside>to be made sticky</aside> 
    <section class="main">List of things</section>

來源

2013-07-20 user2515479

爲什麼jsFiddle中有'
'標籤？ – Dolchio

嗨。只是爲了說明內容大小不同（例如，圖片佔用不止一行）。否則，它看起來像一切都對齊。 – user2515479

試試這個http://jsfiddle.net/zn3qz/1/如果你想響應請使用參考本網站http://twitter.github.io/bootstrap/scaffolding.html – falguni

根據您的要求，這裏的另一個變化：http://jsfiddle.net/panchroma/TtT6h/

我所做的唯一真正的變化是，我已經添加了CSS

aside{ 
clear:right; 
}

這可確保第二個旁邊清除第一個旁邊，並可完全滑向右邊。

希望這會有所幫助！

來源

2013-07-20 13:00:44

謝謝！我也嘗試過。唯一的問題是標題和事物列表之間的差距，因爲它在圖片旁邊元素的下方滑動。 – user2515479

如果你知道標題的高度，這裏有一個可能適合你的變體：http://jsfiddle.net/panchroma/yE5gw/ –

對於像這樣的jquery是非常有幫助的完整。您可以獲得窗口寬度，並根據該寬度編輯CSS以創建一列或兩列。

來源

2013-07-20 16:35:54

響應式設計和粘滯div

回答

相關問題