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

Question

[Frel]

Как лучше сверстать три блока в ряд? код

Answer 1

[Ivan Bogachev]

Может быть неплохой идеей при верстке простых страниц использовать какие-нибудь легковесные сеточки (к примеру skeleton - просто и со вкусом). Они заметно ускоряют процесс расположения блоков на странице - можете посмотреть пример, вам остается только добавить необходимый дизайн.

Comments

[Frel]

Ну хочется научиться сначала простому коддингу, а потом уже возьмусь за всякие фреймворки!!!

[Ivan Bogachev]

Frel: Загляните на досуге в исходник скелетона - он может навести на мыли о том, как делать колонки https://github.com/dhg/Skeleton/blob/master/css/sk...

[Frel]

А вообще лучше сначала так без фреймворков верстать или переходить на них?

[semki096]

лучше без фреймворка набить шишек, иначе никак

[Ivan Bogachev]

Frel: Лучше пробовать использовать простые фреймворки и смотреть как они устроены (в первую очередь устройство сеток) - и параллельно верстать те же страницы без их использования. Вы быстро поймете где что стоит или не стоит использовать.
Тут главное не уходить в крайности - чистый самописный html+css часто приходится долго отлаживать (не забывайте про адаптивность сайтов), но и притягивать по 10 разных стилей извне, или, что еще хуже, скриптов тоже не стоит.

Answer 2

[Nick Toot]

Добавь свойство display со значением inline-block.

section#three .desc1,
section#three .desc2,
section#three .desc3{
    width: 300px;
    height: 212px;
    text-align: center;
    display: inline-block;
}

Comments

[Frel]

Почему последний сьезжает в низ!

[Nick Toot]

Frel: не знаю, я в codepen дописал эту строчку и у меня три в ряд встали. Я бы еще убрал все свойства float, которые у тебя отдельно написаны ниже для каждого desc, а расстояние между ними делал с помощью margin.

[Frel]

NickToot: Расстояние с помощью маргин не делается!!!

[Frel]

Только съезжает вниз третье блок!

[Nick Toot]

Frel: в общем с нуля: для desc1, desc2, desk3 добавь display: inline-block; . У всех desc убери свойство float, для desc1 и desc2 добавь margin-right: 15px; например, у меня после всех этих действий все отлично отображается. Если уезжает значит блоки не влазят в родителя, у тебя это .mid, попробуй увеличь у него ширину.

[Frel]

Ну по дизайну ширина та, скинь ка свой код, что-то не доходит!

[Nick Toot]

Frel: блин, чувак) ты понимаешь что если у тебя не влазит что-то, это значит или родителя шире или содержимое меньше. Ты поставил margin: 80px 30px; это значит 80px сверху и снизу и 30px по бокам, это сильно много, ставь меньше, и вообще лучше бы ты поставил margin-right для первого и второго desc.

Answer 3

[Сергей Горячев]

width: calc(300px - 0.25em);
Нужно убрать отступ между inline блоками.
Или сделать блоки через float: left;