Как лучше сверстать блок по левому и правому краю?

Question

[Александр Янк]

Подскажите, как гибче и правильнее сверстать данный список преимуществ joxi.ru/Vm6bKpWU107lmZ

Я сверстал так:

.school-photos .advantages {
    margin: 0;
    padding: 0;
    list-style: none;
}
.school-photos .advantages li {
    width: 40%;
    margin-bottom: 20px;
    float: left;
    text-align: left;
    color: #096464;
    font-size: 1.28571em;
    font-weight: bold;
    text-transform: uppercase;
}
.school-photos .advantages li:nth-child(even) {
    float: right;
    text-align: right;
}

Но мне кажется это не правильно, хоть и CSS не много, зато адаптив тяжело делать.
Живая верстка artlenk.ru/project/photo

Answer 1

[Сергей delphinpro]

Для начала, у вас лишняя специфичность в селекторе
Достаточно использовать

.advantages {}
.advantages li {}

Но это к делу не относится :)

.advantages {
  display: flex;
  flex-wrap: wrap;
}
.advantages li {
  flex: 0 1 50%;
}
.advantages li:nth-child(even) {
    text-align: right;
}

вот и все (ну префиксные свойства сами расставьте).

Comments

[Александр Янк]

лишняя специфичность в селекторе из препроцессора SASS, но учту ваше мнение. Флексом верстал, но не знал, что можно делать такое с элементами в контейнере флексбокса - flex: 0 1 50%; вы открыли глаза на различные возможности.

Answer 2

[Сергей Зеленский]

лучше использовать Flex если на поддержка старых браузеров не важна

Comments

[Александр Янк]

Старые не нужны, можете привести пример

[Сергей Зеленский]

гуглите верстка сайта при помощи flex

[Александр Янк]

Сергей Зеленский: ясно с вашим уровнем :)

[Сергей Зеленский]

что вам ясно с моим уровнем? я работаю, и рассусоливать вам элементарные вещи мне не интересно, если вы не в состоянии прочитать про flex, то вам надо менять профессию, вашу задачу решит свойство justify-content:space-between; для flex- контейнера. Надеюсь дальше у вас хватит ума зайти в гугл и почитать что такое flex

[Сергей Зеленский]

И советую вам убрать вот это предложение:"Занимаюсь профессионально HTML версткой. " , у вас начальный уровень в верстке, и почитайте на досуге про БЭМ

[Александр Янк]

Вот за этот совет спасибо, вы правы, я не верно себя позиционирую, удалил хвастливую информацию.
Про флекс я читал, и умею им пользоваться, но не знал, что можно добавить к дочкам flex: 0 1 50%

Answer 3

[Юрий Кучеренко]

Делаешь 2 блока условно right и left и флотишь их, либо на флексе

Comments

[Александр Янк]

Вот это я знаю и flex`ом умею верстать, но хочу что бы это был целый список li, не хочется плодить еще один концейнер и делить пункты...