выравнивание: первый и последний элемент в строке в строке

Тема в разделе "Верстка", создана пользователем duncan, 28 дек 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.591
    Симпатии:
    438
    выровнять два элемента в строке не проблема -- первый получает float:left, второй float:right
    кладём эти два элемента в контейнер с overflow:hidden и дело в шляпе
    но как сделать выравнивание, если элементов больше чем два?

    screen.jpg
     
  2. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    325
    Симпатии:
    107
    быть может псевдоклассами :first-child и :last-child?
    Если конкретнее, то задаётеэлементам float: left, рассчитываете отступы исходя из ширины контейнера и убираете через :first-child отступ слева, а через :last-child отступ справа.
    Пример кода:
    Код:
    .container{overflow: hidden; width: 950px;}
    .block{float: left; margin: 5px; width: 230px; height: 100px;}
    .block:first-child{margin-left: 0;}
    .block:last-child{margin-right: 0;}
     
    Последнее редактирование: 28 дек 2014
  3. qpPeW

    qpPeW Постоялец

    Регистр.:
    5 окт 2009
    Сообщения:
    80
    Симпатии:
    31
    Это примерно тоже самое что описал ТС, если уж использовать :*-child, тогда уже лучше :nth-child(1), :nth-child(2) и т.д.
     
  4. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    325
    Симпатии:
    107
    ну если я правильно понял, то ТС именно это и хочет сделать. (ориентировался по рисунку и названию темы)
    :nth-child использовать глупо, т.к. здесь не нужно менять позицию или отступы каждого элемента, или элемента из середины. а будет достаточно только первого и последнего. (опять же, если я правильно понял ТСа)
     
    Последнее редактирование: 28 дек 2014
  5. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    179
    "Девочки не ссорьтесь" :)
    Сделайте на jsFiddle или на codepen образцы и скиньте сюда.
    И для ТС будет полезно разные варианты посмотреть. А ругань, пожалуйста, затрите и перенесите в приват, пока модератор не похерил все посты.
     
    NikroVir нравится это.
  6. vytyacom

    vytyacom Постоялец

    Регистр.:
    19 ноя 2014
    Сообщения:
    136
    Симпатии:
    54
    если нужна кроссбраузерность, то лучше не использовать last-child (а так же nth-child), т.к. ie8 уже его не увидит.
    в данном случае возможна данная картина
    .container { width: 1170px; }
    .child { width: 270px; float: left; margin: 0 0 0 30px; }
    .child:first-child { margin: 0; }
    ну или тут
     
  7. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
  8. Shevasik

    Shevasik Создатель

    Регистр.:
    26 авг 2011
    Сообщения:
    10
    Симпатии:
    1
    даеш их контейнеру
    display: flex;
    justify-content: space-between;
    text-align: justify;
    и ровняет все
     
  9. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.591
    Симпатии:
    438
    это уже совсем экзотика)
    через пару-тройку лет можно будет использовать
     
  10. troop3r

    troop3r Постоялец

    Регистр.:
    14 ноя 2009
    Сообщения:
    138
    Симпатии:
    22
    hitakiri нравится это.