arteqrt
@arteqrt
Почти не начинающий програмист

Путаница с позиционированием, как решить?

Еб*сь с этой фигней 11 часов (я новичок)
нужно поставить 1("info-footer") блок и 2("social") на 1 линию, но 2 постоянно перескакивает на 2 из за того, что в первом блоке display:flex.
вот код html&css
<footer>
			<div id="info-footer">
				<div>Новости</div>
				<div>Поддержка</div>
				<div>О сайте</div>
				<div>На главную</div>
				<div>Войти</div>
				<div>Регистрация</div>
				<div>Реклама</div>
			</div>
			<div id="social">
				<a href="#" target="_blanke" title="Телеграм">
					<i class="fab fa-telegram-plane" id="telegram"></i>
				</a>
			</div>
		</footer>

footer {
	float: left;
	width: 99.4%;
	padding: 0.3%;
	border-top: 1px solid #a7a7a7;
	background-color: #85959A;
	padding-top: 12px;
	padding-bottom: 10px;
	font-family: 'Exo 2', sans-serif;
	font-weight: 300;
}

#wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;

}

#content {
	flex: 1 0 auto;
}

#info-footer {
	display: flex;
	justify-content: flex-start;
	color: #ffffff;
	margin-left: 1%;
	margin-right: 0%;
	width: 59%;
}
#info-footer>div {
	padding: 10px;
	width: 100px;
	text-align: center;	
	font-size: 1em;
	transition: box-shadow 0.3s ease;
	-o-transition: box-shadow 0.3s ease;
	-ms-transition: box-shadow 0.3s ease;
	-webkit-transition: box-shadow 0.3s ease;
	-moz-transition: box-shadow 0.3s ease;
}
#info-footer>div:hover {
	box-shadow: inset 0 0 0 2px white;
}



#social {
	width: 40%;
	float: right;
	color: #ffffff;
	margin-left: 0%;
	margin-right: 0%;
}
#social>a>i {
	width: 100px;
	text-align: center;	
	font-size: 4em;
	transform: scale(0.8);
	transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
}
#social>a>i:hover {
	transform: scale(1);
}

Спасибо всем кто поможет!
  • Вопрос задан
  • 75 просмотров
Решения вопроса 1
hzzzzl
@hzzzzl
то есть как-то так?
https://jsfiddle.net/n32sk450/2/

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
28 нояб. 2024, в 05:21
2000 руб./за проект
28 нояб. 2024, в 05:18
500 руб./за проект
28 нояб. 2024, в 03:51
3500 руб./за проект