Криво отображаются блоки. В чем причина?

Question

[Лёша Ларионов]

Подскажите пожалуйста почему тут едут блоки? Не могу понять... Не хватает знаний.... (
srubi.vilka.cc/uslugi

Comments

[Рома Зварич]

Алексей Ларионов, уточните пожалуйста, какие именно блоки и куда едут? С виду вроде все нормально

[Лёша Ларионов]

Рома Зварич, вот скрин:

[Рома Зварич]

Алексей Ларионов , Вы зря к вопросу не добавили тег "Bootstrap". Скорее всего, проблема в нём. А люди, отслеживающие этот тег, могут не увидеть Ваш вопрос

[Лёша Ларионов]

Рома Зварич, добавил, спасибо!

Answer 1

[Дмитрий]

попробуй так:

.service.row {
    display: flex;
    flex-wrap: wrap;
}

Comments

[Рома Зварич]

Дмитрий , уверены, что это использование правил Flexbox - подходящее решение в данном случае?
Там же Bootstrap используется. Он вроде сам должен располагать элементы

[Rustam Bainazarov]

Рома Зварич, а одно другому мешает? «Вроде» — самое главное слово. Универсальное решение (Bootstrap) — не может покрывать всех задач.

[Лёша Ларионов]

А почему в текущем виде не работает? можете подсказать?

[Михаил]

Алексей Ларионов, Потому что сетка на флотах, и 1 блок выше другого, по этому все и едет

[Rustam Bainazarov]

Алексей Ларионов, потому что float'ы. Потому что на них уже не делают layout'ы. Тот же Bootstrap 4 построен на flex'ах уже.

Не знаю, используете ли вы его (сижу с телефона), если да, то там были классы .d-flex и .flex-row, которые нужно поставить вместе просто .row, чтобы сделать flex-обертку.

Update. Хотя вроде бы и просто .row там сейчас на flex изначально.

[Рома Зварич]

Рустам Байназаров, не сочтите за попытку придраться, но кажется, в данной ситуации всё же проблема в чем-то другом. Сам факт использования флоатов не приводит к их некорректной работе.

[Rustam Bainazarov]

Рома Зварич, проблема в том, что какой-то из блоков получился больше по высоте box-модели, чем его сосед. Для float'ов это смертельно.

Для построения layout'ов float'ы уже давно не надо использовать, если не нужна поддержка браузеров старше IE11. Они никогда для этого не были предназначены и использовались по сути как хак.

[Рома Зварич]

Рустам Байназаров,

Для построения layout'ов float'ы уже давно не надо использовать, если не нужна поддержка браузеров старше IE11. Они никогда для этого не были предназначены и использовались по сути как хак

Я с Вами абсолютно согласен.
Сам только учусь и вижу преимущество Flexbox над Float.
Но есть продукт, сделанный с их использованием.
И лично мне для общего развития интересно было бы понять проблему, поэтому и спрашиваю.

[Rustam Bainazarov]

Рома Зварич, понимаю.

Если вы о Bootstrap 3, то данный продукт устарел. Используйте Bootstrap 4, который уже версии 4.3.1, как я погляжу. Но лучше для обучения верстать вручную, конечно.

[Лёша Ларионов]

Дмитрий выравнивается по Вашему совету, но едет на других страницах сайта

Answer 2

[Михаил]

1. По ссылке нет этих блоков
2. Флоты. Решение: inline-block или флексы, в частности обновит сетку bs

Comments

[Лёша Ларионов]

srubi.vilka.cc/uslugi