Отзывчивый дизайн и липкий div

У меня есть расположение двух столбцов. Если определенный размер экрана встречается, они ломаются так, что все будет отображаться в одном столбце. Поэтому упорядочение этих элементов важно, чтобы убедиться, что соответствующие элементы отображаются сначала при просмотре с меньшим экраном.Отзывчивый дизайн и липкий div

Проблема с этой настройкой заключается в том, что второй элемент «быть липким» в стороне не правильно плавает вправо, а вместо него где-то между ними.

увидеть в действии: http://jsfiddle.net/zn3qz/

 .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

ответ

Смежные вопросы