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

Тема в разделе "Wordpress", создана пользователем kikorik, 28 янв 2015.

Модераторы: Sorcus
  1. kikorik

    kikorik Постоялец

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

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    179
    Нужно больше веспен газа информации.
     
  3. vytyacom

    vytyacom Постоялец

    Регистр.:
    19 ноя 2014
    Сообщения:
    136
    Симпатии:
    54
    Как вариант можно так
    Только тут вместо float'ов использую display inline-block. Возможно просветы у тебя появляются когда высоты разные у блоков и какойнить один блок переносится черт знает куда.
    В этом плане инлайн-блок удобнее, только на родительский блок обязательно font-size: 0, сам размер указать уже в дочернем блоке.
     
    Последнее редактирование: 29 янв 2015
  4. kikorik

    kikorik Постоялец

    Регистр.:
    13 май 2012
    Сообщения:
    115
    Симпатии:
    4
    Вы совершенно правы, просветы из-за разной высоты. Вот про display inline-block совсем забыла. А почему нулевой размер ставить?
     
  5. vytyacom

    vytyacom Постоялец

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

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

    kikorik Постоялец

    Регистр.:
    13 май 2012
    Сообщения:
    115
    Симпатии:
    4
    Спасибо за разъязнение. Указание нулевого размера помогло. Век живи, век учись.