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

[duncan]

выровнять два элемента в строке не проблема -- первый получает float:left, второй float:right
кладём эти два элемента в контейнер с overflow:hidden и дело в шляпе
но как сделать выравнивание, если элементов больше чем два?

 

[NikroVir]

быть может псевдоклассами :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;}

 

[qpPeW]

быть может псевдоклассами :first-child и :last-child?
Если конкретнее, то задаётеэлементам float: left, рассчитываете отступы исходя из ширины контейнера и убираете через :first-child отступ слева, а через :last-child отступ справа

Это примерно тоже самое что описал ТС, если уж использовать :*-child, тогда уже лучше :nth-child(1), :nth-child(2) и т.д.

 

[NikroVir]

Это примерно тоже самое что описал ТС

ну если я правильно понял, то ТС именно это и хочет сделать. (ориентировался по рисунку и названию темы)

если уж использовать :*-child, тогда уже лучше :nth-child(1), :nth-child(2) и т.д.

:nth-child использовать глупо, т.к. здесь не нужно менять позицию или отступы каждого элемента, или элемента из середины. а будет достаточно только первого и последнего. (опять же, если я правильно понял ТСа)

 

[Solus_Rex]

"Девочки не ссорьтесь"
Сделайте на jsFiddle или на codepen образцы и скиньте сюда.
И для ТС будет полезно разные варианты посмотреть. А ругань, пожалуйста, затрите и перенесите в приват, пока модератор не похерил все посты.

 

[vytyacom]

если нужна кроссбраузерность, то лучше не использовать last-child (а так же nth-child), т.к. ie8 уже его не увидит.
в данном случае возможна данная картина
.container { width: 1170px; }
.child { width: 270px; float: left; margin: 0 0 0 30px; }
.child:first-child { margin: 0; }
ну или Для просмотра ссылки Войди или Зарегистрируйся

 

[mdss]

Для просмотра ссылки Войди или Зарегистрируйся

 

[Shevasik]

даеш их контейнеру
display: flex;
justify-content: space-between;
text-align: justify;
и ровняет все

 

[duncan]

даеш их контейнеру
display: flex;
justify-content: space-between;
text-align: justify;
и ровняет все

это уже совсем экзотика)
через пару-тройку лет можно будет использовать

 

[troop3r]

вот как это нужно верстать Для просмотра ссылки Войди или Зарегистрируйся