Какой метод расположения элементов бок о бок выбрать? И в каких ситуациях какой метод лучше подходит?

Question

[pegas]

Часто возникает ситуация, когда нужно выставить элементы на одну линию. Есть 2 варианта либо задать им display:inline-block, либо float:left. Так есть ли строгое правило по которому применяется тот или иной метод?
Вот рандомный пример: У span лучше будет применить display:inline-block или float:left ?

Answer 1

[iBird Rose]

flex forever) https://jsfiddle.net/ctv5f0vw/2/

Comments

[pegas]

Ну да влекс мощный но не кроссбраузерный( (ещё)

[iBird Rose]

1PeGaS: только на IE 11- не работает. но кого этот IE останавливал) caniuse.com/#feat=flexbox

[Андрей Федоров]

1PeGaS: Вы осознате что более кросбраузерным он никогда уже не будет? caniuse.com/#search=flex , ибо разработка браузеров где flex не поддерживается прекращена? Используете и не забивайте себе голову ерундой.

[Николай]

1PeGaS: можно смело использовать.

[Ankhena]

Ergonomic Code: Хорошо бы стимулировать народ развиваться и обновлять операционные системы и браузеры. Потому что те, кто сидит на всяком старье делают это от закостенелости и лени: "ой, а в компьютерах полный ноль, а что такое браузер?". И шевелиться они начинают только тогда, когда совсем припрет и что-то не работает.

Я сама стараюсь как можно тщательнее проверять работу на разных устройствах, настройках и браузерах.

Но поддерживая годами старье мы мешаем и своему развитию. Продолжаем городить велосипеды вместо использования удобных средств. Да, флекс далеко не совершенство. Тем не менее, надеюсь, что будет улучшаться нам на радость, как бы он не стал называться.

[pegas]

Ankhena W: Ну да... Или принудительно заставлять обновлять браузеры что ли

[Ankhena]

Ergonomic Code: Потому что псевдотаблицы это исправление отсутствия родной возможности центрировать содержимое div'а по вертикали.

Есть задача - есть решение. Если вы делаете только высококонкурентные ИМ, то да, ИЕ7 еще долго будет преследовать. И долго придется грузить на приличные компьютеры кучу ненужного барахла. О флексе придется забыть.

В большинстве случаев можно верстать начиная от ИЕ10. Иногда уже встречаются добрые заказчики, которым ИЕ вовсе не нужен. Для устаревших - урезанная версия.

Answer 2

[Николай]

Оба метода имеют место быть и у них есть плюсы и минусы. На данный момент все стараются уменьшить кол-во флоатов в верстке.

Answer 3

[Сергей Белоусов]

Применяй display: flex; это сегодня надежней всего