Адаптивный дизайн и Clearfix

У меня есть этот адаптивный макет для страницы. <aside> имеет постоянную ширину, а область .main имеет margin-right. Я делаю это, потому что хочу, чтобы область .main адаптировалась к различным устройствам, а область <aside> оставалась неизменной.

http://jsfiddle.net/c6mZN/1/

Проблема, как видите, в том, что у меня внутри основной области есть список объектов, которые также используют clearfix, и первый элемент полностью очищает объект до конца боковой панели. Я хочу, чтобы он выглядел точно так же, как остальные .block

Как я мог этого добиться?


css responsive-design css-float clearfix
person Enrique Moreno Tent    schedule 13.03.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Разветвил вашу скрипку с фиксированным кодом.

Ваш элемент .main должен знать, что у него есть отдельный «контекст форматирования», чтобы его дочерние элементы могли игнорировать внешний поток макета: единственный способ сделать это в браузерах, соответствующих стандартам, — это overflow: hidden:

.main {
    overflow: hidden;
}

Между прочим, вы можете избавиться от поля на .main, и он автоматически займет все оставшееся место (так что вы можете изменить ширину aside по своему усмотрению или даже добавить дополнительные столбцы) — затем я дал aside margin-left: 10px для диктуйте зазор, необходимый для сохранения постоянного макета.

person Barney    schedule 13.03.2013