Помощь Нестандартный вывод последних записей на главной

[kikorik]

Пытаюсь сделать вывод последних записей на главной как на джумле: первая новость во всю ширину, а ниже в две колонки. Первой записи прописываю width100%, а следующим width 50% float left. На первый взгляд все работает, но потом появлются просветы в колонках.

 

[Solus_Rex]

Пытаюсь сделать вывод последних записей на главной как на джумле: первая новость во всю ширину, а ниже в две колонки. Первой записи прописываю width100%, а следующим width 50% float left. На первый взгляд все работает, но потом появлются просветы в колонках.

Нужно больше веспен газа информации.

 

[vytyacom]

Как вариант можно Для просмотра ссылки Войди или Зарегистрируйся
Только тут вместо float'ов использую display inline-block. Возможно просветы у тебя появляются когда высоты разные у блоков и какойнить один блок переносится черт знает куда.
В этом плане инлайн-блок удобнее, только на родительский блок обязательно font-size: 0, сам размер указать уже в дочернем блоке.

 

[kikorik]

Как вариант можно Для просмотра ссылки Войди или Зарегистрируйся
Только тут вместо float'ов использую display inline-block. Возможно просветы у тебя появляются когда высоты разные у блоков и какойнить один блок переносится черт знает куда.
В этом плане инлайн-блок удобнее, только на родительский блок обязательно font-size: 0, сам размер указать уже в дочернем блоке.

Вы совершенно правы, просветы из-за разной высоты. Вот про display inline-block совсем забыла. А почему нулевой размер ставить?

 

[vytyacom]

Вы совершенно правы, просветы из-за разной высоты. Вот про display inline-block совсем забыла. А почему нулевой размер ставить?

Я не объясню 100% точно, но чтото вроде косяка изза пробелов между блоками.
Т.е. для браузера структура с инлайн-блоками
<li>ЧТОТО ТАМ</li>
<li>ЧТОТО ТАМ</li>
Выглядит так
<li>ЧТОТО ТАМ</li> <li>ЧТОТО ТАМ</li>
Соответственно в итоговом варианте между блоками может возникнуть небольшое расстояние изза пробела между блоками в хтмл представлении браузера. Как следствие не будут работать варианты с шириной в 50%, изза того что каждый блок будет занимать 50%+небольшой пробел.
И чтоб избавиться от него проще всего указать на ul - font-size: 0;
Может быть не обязательно связка ul - li , любая аналогичная; divы так же под это решение попадают.

МОжно попробовать поиграться с этим по ссылке которую указал в предыдущем своем комменте. Просто уберите из ul'a строку с фонтсайзом.

 

[kikorik]

Спасибо за разъязнение. Указание нулевого размера помогло. Век живи, век учись.