Здравствуйте. Очень нужна ваша помощь. Верстальщик, который делал морозится по пополной((
Вот страница
сайта Верстка flexbox. Вы там можете увидеть 6 коротких записей. По сути верстка правильная. но там много родительских элементов, а мне нужно, чтобы был один родитель и 6 дочерних элементов и я не могу понять как это исправить.
Помогите пожалуйста с данной ситуацией, в замен буду бесконечно благодарен и если нужно помогу с MODx)
Реально не шарю в flexbox, понимаю мой косяк но увы как есть.
Возможно это все можно реализовать через :nth-child, в общем прошу Вашей помощи)
Код:
<main class="events">
<div class="events__wrapper">
<!-- Контент -->
<div class="events__container">
<div class="events__row">
<div class="events__column">
<div class="events-item">
<a class="events-item__thumb" href="event.html">
<img class="events-item__img" src="pic/events-item-1.jpg" alt="Фото">
</a>
<div class="events-item__textual">
<time class="events-item__date" datetime="2016-12-25">25.12.2016</time>
<div class="events-item__title">
<a href="event.html">Место для заголовка новости или события</a>
</div>
<div class="events-item__text">По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у
некторых клиентов недоумение при попытках прочитать рыбу текст.
</div>
</div>
</div>
<div class="events-item events-item--reverse">
<a class="events-item__thumb" href="event.html">
<img class="events-item__img" src="pic/events-item-3.jpg" alt="Фото">
</a>
<div class="events-item__textual">
<time class="events-item__date" datetime="2016-12-25">25.12.2016</time>
<div class="events-item__title">
<a href="event.html">Место для заголовка новости или события</a>
</div>
<div class="events-item__text">По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у
некторых клиентов недоумение при попытках прочитать рыбу текст.
</div>
</div>
</div>
</div>
<div class="events-item events-item--vertical">
<a class="events-item__thumb" href="event.html">
<img class="events-item__img" src="pic/events-item-2.jpg" alt="Фото">
</a>
<div class="events-item__textual">
<time class="events-item__date" datetime="2016-12-25">25.12.2016</time>
<div class="events-item__title">
<a href="event.html">Место для заголовка новости или события</a>
</div>
<div class="events-item__text">По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у
некторых клиентов недоумение при попытках прочитать рыбу текст.</div>
</div>
</div>
</div>
<div class="events__row events__row--reverse">
<div class="events__column">
<div class="events-item">
<a class="events-item__thumb" href="event.html">
<img class="events-item__img" src="pic/events-item-1.jpg" alt="Фото">
</a>
<div class="events-item__textual">
<time class="events-item__date" datetime="2016-12-25">25.12.2016</time>
<div class="events-item__title">
<a href="event.html">Место для заголовка новости или события</a>
</div>
<div class="events-item__text">По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у
некторых клиентов недоумение при попытках прочитать рыбу текст.
</div>
</div>
</div>
<div class="events-item events-item--reverse">
<a class="events-item__thumb" href="event.html">
<img class="events-item__img" src="pic/events-item-3.jpg" alt="Фото">
</a>
<div class="events-item__textual">
<time class="events-item__date" datetime="2016-12-25">25.12.2016</time>
<div class="events-item__title">
<a href="event.html">Место для заголовка новости или события</a>
</div>
<div class="events-item__text">По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у
некторых клиентов недоумение при попытках прочитать рыбу текст.
</div>
</div>
</div>
</div>
<div class="events-item events-item--vertical">
<a class="events-item__thumb" href="event.html">
<img class="events-item__img" src="pic/events-item-2.jpg" alt="Фото">
</a>
<div class="events-item__textual">
<time class="events-item__date" datetime="2016-12-25">25.12.2016</time>
<div class="events-item__title">
<a href="event.html">Место для заголовка новости или события</a>
</div>
<div class="events-item__text">По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у
некторых клиентов недоумение при попытках прочитать рыбу текст.</div>
</div>
</div>
</div>
</div>
<!-- Еще -->
<button class="events-more">Показать еще</button>
</div>
</main>
Средний
