将页脚分隔为三列

Question

我正在尝试将页脚分成一行中的三列。左边是我的版权；中间是社交媒体；右边是我的联系人。

我一直在尝试、阅读和观看很多东西，但我发现真的很难完成。有人可以帮我吗 - 我会 post 下面是我的代码。

如果你也能解释一下你做了什么，以便我学习以备将来参考，将不胜感激。请使用简单的术语...如您所见，我是一个初学者哈哈。

谢谢。

body{
    margin: 0;
    border: 0;
    padding: 0;
}

/* Slideshow */
.section1{
    background: url(files/home-slideshow-001.jpeg);
    height: 90vh;
    background-size: cover;
}
#overlay{
    font-family: Oswald;
    text-transform: uppercase;
    font-size: 3vw;
    font-weight: 700;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* End Slideshow */

/* Footer */
footer{
    background: #111111;
    height: 10vh;
}
.copyright, p{
    color: whitesmoke;
}

.contact{
    color: whitesmoke;
}

a{
    text-decoration: none;
    color: whitesmoke;
}
/* End Footer */

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Home - Motive Media Productions</title>
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Oswald:500,600,700" rel="stylesheet">
    </head>
    <body>
        <div class="section1">
            <div id="overlay">
                <h1>Text</h1>
            </div>
        </div>
    </body>
    <footer>
        <div class="copyright">
            <p>&copy; 2018</p>
        </div>
        <div class="brands">
            <div class="social-media">
                    <a href="http://www.facebook.com/" target="_blank">
                        <img src="files/facebook.png"></a>
                    <a href="http://www.instagram.com/" target="_blank">
                        <img src="files/instagram.png"></a>
                    <a href="http://www.twitter.com/" target="_blank">
                        <img src="files/twitter.png"></a>
            </div>
        </div>
        <div class="contact">
            <li class="contact-list">
                <a href="00">00</a>
            </li>
            <br>
            <li class="contact-list">
                <a href="mailto:hi@hi.com">hi@hi.com</a>
            </li>
        </div>
    </footer>
</html>

Answer 1

我能给你的最简单的解决方案和建议是使用flexbox。通过简单地将 display:flex 添加到页脚，您将拥有 3 列，然后您可以调整不同的属性来控制大小、对齐等：

body{
    margin: 0;
    border: 0;
    padding: 0;
}

/* Slideshow */
.section1{
    background: url(files/home-slideshow-001.jpeg);
    height: 90vh;
    background-size: cover;
}
#overlay{
    font-family: Oswald;
    text-transform: uppercase;
    font-size: 3vw;
    font-weight: 700;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* End Slideshow */

/* Footer */
footer{
    background: #111111;
    min-height: 10vh;
    display:flex;
}
footer > div {
  flex:1;
}
.copyright, p{
    color: whitesmoke;
}

.contact{
    color: whitesmoke;
}

a{
    text-decoration: none;
    color: whitesmoke;
}
/* End Footer */

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Home - Motive Media Productions</title>
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Oswald:500,600,700" rel="stylesheet">
    </head>
    <body>
        <div class="section1">
            <div id="overlay">
                <h1>Text</h1>
            </div>
        </div>
    </body>
    <footer>
        <div class="copyright">
            <p>&copy; 2018</p>
        </div>
        <div class="brands">
            <div class="social-media">
                    <a href="http://www.facebook.com/" target="_blank">
                        <img src="files/facebook.png"></a>
                    <a href="http://www.instagram.com/" target="_blank">
                        <img src="files/instagram.png"></a>
                    <a href="http://www.twitter.com/" target="_blank">
                        <img src="files/twitter.png"></a>
            </div>
        </div>
        <div class="contact">
            <li class="contact-list">
                <a href="00">00</a>
            </li>
            <li class="contact-list">
                <a href="mailto:hi@hi.com">hi@hi.com</a>
            </li>
        </div>
    </footer>
</html>

将页脚分隔为三列

separate footer to three columns

html

css

footer