Question

我试图将我的页脚分成一行中的三列。左边是我的版权;中间将是社交媒体;对，将是我的联系方式。

我一直在努力阅读和观看这么多东西，我发现它很难完成。有人可以帮帮我 - 我会在下面发布我的代码。

如果你能解释你所做的事情，我将非常感激，以便我可以学习将来的参考资料。请使用简单的术语...你可以看到我是一个初学者哈哈。

谢谢。

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。只需将template<typename T> class zero_init { T val; public: zero_init() : val(static_cast<T>(0)) { std::cout << "In constructor with no parameters\n"; } operator T() const { std::cout << "In operator T()\n"; return val; } }; int main() { const zero_init<int> x; x(); //Error! return 0; }添加到页脚，就会有3列，然后您可以调整不同的属性来控制大小，对齐等：

＆＃13;

display:flex

＆＃13;

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

＆＃13;

单独的页脚到三列

1 个答案: