Как реализовать этот блок?

Question

[Immix]

Помогите нормально сверстать. Это случайно не таблицей нужно делать?



Большие отступы получаются, если в дивах то еще больше. Уже поздно и я не соображаю)

<div class="events clearfix">
                    <div class="event left clearfix">
                        <div class="date left">
                            <span class="date1">20</span><br>
                            <span class="date2">July</span>
                        </div>
                        <div class="time left">
                            <span class="time1">Family sunday</span><br>
                            <span class="time2">Sunday | 9:30am</span>
                        </div>
                    </div>
                    <div class="button left text-right">
                        <a href="#" class="more-button text-center">More</a>
                    </div>
                </div>

Comments

[tef]

Это обычные дивы. В чём конкретно загвоздка?

[Immix]

tef: это выходит куча дивов с флоатами? у меня большие отступы снизу 20 и family sunday

[tef]

> это выходит куча дивов с флоатами?
Да. флоаты, инлайн-блоки или флексбоксы, выбирай что хочешь.

Что не так с отступами?

[Евгений]

А в чем проблем inline-block не использовать, и vertical-align:middle

[Immix]

tef: Евгений: код в описании и скрин

[tef]

Immix: поставь date1 { line-height: 1em; }

[Immix]

tef: ставил, выходит вот что https://habrastorage.org/files/12f/a4b/df2/12fa4bd...

[tef]

Immix: тогда не 1em, а в пикселях величину, такой же, как у тебя цифра 20.

[tef]

и через br как-то некошерно. Лучше инлайн-блоки, либо флексбоксы.

[Immix]

tef: флексбоксы не учил толком) вот такой код вышел

.date1 {
display: inline-block;
margin-top: 27px;
color: #668333;
font: 2em/16px 'ProximaNovaRegular';
}

[Immix]

tef: если использую это то july улетает на другой блок

.block::after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}

[tef]

Immix: Ты бы лучше на codepen.io этот кусок скопипастил и ссылку бы кинул.

[tef]

tef: У тебя размер шрифта стоит 2em, это от какого блока? Если от основного, то это 32px. И vertical-align: middle ещё нужно.
Вообще если по нормальному, задаёшь height этому блоку и line-height задаёшь размером с эту высоту.

[Immix]

tef: codepen.io/Immix/pen/PPgmxP?editors=110

[tef]

Immix: так норм? codepen.io/-tef/pen/ZbZKwr?editors=110

[tef]

Immix: Вообще разметка какая-то странная. Но со временем придёт...
Если у тебя два инлайновых или инлайн блочных элемента, то их нельзя разбивать на разные строки, иначе будет отступ. И запомни, что если элемент один в как у тебя, как date1, а под ним другой элемент, как date2, смело ставь display: block, либо делай просто дивом. Див занимает всю строку и никого на неё не пускает.

[tef]

Immix: У тебя косяк был в наличии br

[Immix]

tef: пишу у себя то как ты сделал, но выходит отступ еще больше
codepen.io/Immix/pen/PPgmxP?editors=110 вот так у меня норм, только margin-top в кодепен надо 20px что бы было по центру

[Immix]

tef: Единственный рабочий вариант...


20
July


Family sunday
Sunday | 9:30am



.date1 {
margin-top: 27px;
color: #668333;
font: 2em/16px 'ProximaNovaRegular';
}

.date2 {
color: #668333;
font: 0.88em 'ProximaNovaRegular';
text-transform: uppercase;
}

[Immix]

tef: короче на дивы поменял

[tef]

Immix: Убери
и сделай date1 { display: block} или просто дивом

[Immix]

tef: последняя версия codepen.io/Immix/pen/PPgmxP?editors=110

[Immix]

tef: все это мне кажется извращением)

[tef]

Короче, вот у тебя основной блок (полоска). Всё что идёт друг за другом, это инлайн блок, всё что занимает одну строку это просто блок. Поэтому у тебя в этой полоске вначале инлайн блок, в нем два обычных дива. в одном "20", во втором "julay". Далее следующий инлайн блок, в нём внутри так же две строки, значит два обычных дива, в одном "Family sunday", во втором "Sunday | 9:30am". Дальше идёт кнопка, которая тоже инлийн блок, которую нужно флаотнуть вправо.

[Immix]

tef: у меня внутри три блока в %, все флоатнуты влево, а кнопка мне внутри блока флоатнуть вправо?)

[tef]

codepen.io/-tef/pen/ZbZKwr?editors=110

[tef]

Immix: понимаешь концепцию?

[Immix]

tef: понял, спасибо. Правда у меня все на флотах и блоки в % для резины...

[tef]

Immix: font-size тогда задавай в процентах

[Immix]

tef: я задаю в em, а есть разница?

[tef]

Immix: habrahabr.ru/post/42151