响应式设计和粘滞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

回答

相关问题