主页 / 问题 / 953915
Accepted
Павел Ериков
Asked:2020-03-08 15:52:25 +0000 UTC2020-03-08 15:52:25 +0000 UTC

CSS页脚布局

  • 772

在此处输入图像描述

假设我是 css 新手，我无法正确处理并继续调整上面屏幕截图中显示的页脚。

到目前为止，这是我能做到的唯一方法

在此处输入图像描述

<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>

样式.css

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

我只是没有尝试插入边距：0 auto; 或显示：弯曲；并将项目与 justify-content: 中心对齐；

都没有成功。

css

2 个回答

  1. Best Answer

    .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>

    • 2 

  2.  .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>

    • 0

相关问题