1

Я хочу блок 'Инвестиции' .post__section переместить, чтобы он располагался правее даты. Я понимаю, как можно это сделать, добавив ещё html кода, но это будет лишним. Подскажите, как переместить блок, добавив только сss.

.post__media__info {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
}

.post__media__info div {
	margin-right: 10px;
}

.post__date {
	min-width: 90px;
}

.post__tags {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}

.post__tags span {
	border: 1px solid #a3a4a6;
	border-radius: 10px;
	padding: 0 10px;
	margin-right: 5px;
	margin-top: 5px;
}
<div class="post__media__info">
	<div class="post__date">19 ноя в 16:30</div>
	<div class="post__section">Инвестиции</div>
	<div class="post__tags">
		<span>IT</span>
		<span>Amazon</span>
		<span>Big Data</span>
		<span>Big Data</span>
		<span>Big Data</span>
		<span>Big Data</span>
		<span>Big Data</span>
		<span>Big Data</span>
	</div>
</div>

1 ответ 1

2

Убираем flex-direction: column добавляем wrap у родителя и у .post_tags добавляем flex-basis на всю ширину контейнера. в результате теги всегда будут на следующей строке!

.post__media__info {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
  /*правка*/
	flex-wrap: wrap;
}

.post__media__info div {
	margin-right: 10px;
}

.post__date {
	min-width: 90px;
}

.post__tags {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
  /*правка*/
  flex-basis: 100%;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}

.post__tags span {
	border: 1px solid #a3a4a6;
	border-radius: 10px;
	padding: 0 10px;
	margin-right: 5px;
	margin-top: 5px;
}
<div class="post__media__info">
	<div class="post__date">19 ноя в 16:30</div>
	<div class="post__section">Инвестиции</div>
	<div class="post__tags">
		<span>IT</span>
		<span>Amazon</span>
		<span>Big Data</span>
		<span>Big Data</span>
		<span>Big Data</span>
		<span>Big Data</span>
		<span>Big Data</span>
		<span>Big Data</span>
	</div>
</div>

2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.