0

введите сюда описание изображения

Я скажем так новичок в css и у меня не получается сверстать правильно и с сохранением адаптации footer который изображен на скриншоте выше.

Пока у меня получается только так

введите сюда описание изображения

<footer>
    <div class="silver_stroke"></div>
    <div id="footer_content" class="clearfix">
        <div id="footer_content_items">
            <div class="footer_item">
                <div class="footer_item_icon">
                    <img src="email.svg">
                </div>
                <div class="footer_item_text">
                    <p>emailpochta@gmail.com</p>
                    <span>Написать нам</span>
                </div>
            </div>
            <div class="footer_item">
                <p>2019 OOO "Анна"</p>
            </div>
            <div class="footer_item">
                <div class="footer_item_icon">
                    <img src="email.svg">
                </div>
                <div class="footer_item_text">
                    <p>emailpochta@gmail.com</p>
                    <span>Написать нам</span>
                </div>
            </div>
        </div>
    </div>
    <div class="silver_stroke"></div>
</footer>

style.css

footer p, footer span{
    color: white;
}
.footer_item {
    float: left;
}
.clearfix:after{
    content: '';
    display: table;
    width: 100%;
    clear: both;
}

Куда я только не пытался вставить margin: 0 auto; или display: flex; и align-items с justify-content: center;

Все без успешно.

2 ответа 2

2

.footer {
    background: black;
    color: white;
    text-align: center;
    padding: 20px 0;
}

.footer_content {
    position: relative;
    margin: 0 auto;
    width: 80%;
    padding: 20px 0;
}

.footer_content::before,
.footer_content::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: white;
    left: 0;
}

.footer_content::before{
    top: 0;
}

.footer_content::after{
    bottom: 0;
}

.footer_content_items{
    display: flex;
    align-items: center;
    flex-direction: column;
}

@media (min-width: 700px){
    .footer_content_items{
        flex-direction: row;
    }

    .footer_item{
        width: calc(100% / 3);
    }
}
<footer class="footer">
    <div class="footer_content">
        <div class="footer_content_items">
            <div class="footer_item">
                <div class="footer_item_icon">
                    <img src="email.svg">
                </div>
                <div class="footer_item_text">
                    <p>emailpochta@gmail.com</p>
                    <span>Написать нам</span>
                </div>
            </div>
            <div class="footer_item">
                <p>2019 OOO "Анна"</p>
            </div>
            <div class="footer_item">
                <div class="footer_item_icon">
                    <img src="email.svg">
                </div>
                <div class="footer_item_text">
                    <p>emailpochta@gmail.com</p>
                    <span>Написать нам</span>
                </div>
            </div>
        </div>
    </div>
</footer>

7
  • А можете подсказать пожалуйста, как сделать так чтобы svg картинка была слева от текста. 8 мар 2019 в 8:12
  • @ПавелЕриков вы покажите макет с желаемым результатом, вам Никита Рогачёв сделал то что вам было надо ...отметьте решением или измените ответ 8 мар 2019 в 9:09
  • @ПавелВаршавский а вы можете не лезть?? И если уж придераться, то не совсем что я хотел. Я смысла не вижу вашего комментария. Я просто задал вопрос не мог ли он подсказать. Я уже готов отметить его ответ правильным, но просто возник МАЛЕНЬКИЙ вопросик. Ну ладно если вы хотите пойду задам еще 1 вопрос с этой проблемой. Так же всем лучше будет??????? 8 мар 2019 в 9:19
  • @ПавелЕриков вы задали вопрос и вам ответили точь в точь как на вашем скриншоте ...всё остальное надо либо указывать сразу либо пояснить что требуется ...вы же меняете задание на лету ... вопросы плодить смысла нету, достаточно просто показать скриншот с желаемым поведением ... и да и грубить не надо ...я не грубил 8 мар 2019 в 9:23
  • 1
    @ПавелЕриков задайте для footer_item display: flex; align-items: center; 9 мар 2019 в 7:53
0

 .footer{
 	background-color: #444;
 	width: 100%;
 	height: 150px;
 	color: #fff;
 	position: absolute;
 	bottom: 0;
 	left: 0;
 }

 hr{
 	width: 90%;
 	margin: 20px auto;
 	color: #fff;
 }

 .content{
 	width: 80%;
 	margin: 0 auto;
 	display: flex;
 	justify-content: space-between;
 }

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

 .mail img{
 	width: 20px;
 	height: 20px;
 	margin: 15px 5px 0 0;
 }

 .write{
 	width: 80%;
 	border-bottom: 1px solid red;
 	text-align: center;
 	margin: 0 auto;
 }

.write a{
	text-decoration: none;
	color: red;

}
	<div class="footer">
		<hr>
		<div class="content">
			<div class="block1 block">
				<div class="mail"><img src="mail.png" alt=""> <p>emailpochta@gmail.com</p></div>
				<div class="write"><a href="">Написать нам</a></div>
			</div>
			<div class="block2 block">
				<h3>2019 ООО "Компания"</h3>
			</div>
			<div class="block3 block">
				<div class="mail"><img src="mail.png" alt=""> <p>emailpochta@gmail.com</p></div>
				<div class="write"><a href="">Написать нам</a></div>
			</div>
		</div>
		<hr>
	</div>

1
  • Спасибо за помощь, но это не то что мне нужно мне уже помог Rogatnev Nikita. 8 мар 2019 в 13:56

Ваш ответ

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

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