Question

所以，我有这个简单的页脚元素，其中我嵌套了4个svg图像和一个段落。

    <img class="image1 svg" src="css/img/facebook.svg" alt="facebook_profile">
    <img class="image2 svg" src="css/img/tweeter.svg" alt="tweeter_profile">
    <img class="image3 svg" src="css/img/google-plus.svg" alt="google_plus_profile">
    <img class="image4 svg" src="css/img/skype.svg" alt="skype_account">

    <p class="copyright">&copy; 2017 Chirca Razvan</p>

</footer>

这些是适用于它的样式：

.svg {
       width: 50px;
       height: 50px;
    }

    .copyright {
        display: block;
        flex-basis: auto;
        margin-left: 15px;
        margin-right: 15px;
    }

    footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background: rgb(9, 28, 41);
        padding: 30px 0;
        text-align: center;
    }

an visual example

我想让那个段落出现在图像下方，它们之间有一些空格。

Answer 1

<div style="margin-bottom: 10px;">
  <img class="image1 svg" src="css/img/facebook.svg" alt="facebook_profile">
  <img class="image2 svg" src="css/img/tweeter.svg" alt="tweeter_profile">
  <img class="image3 svg" src="css/img/google-plus.svg" alt="google_plus_profile">
  <img class="image4 svg" src="css/img/skype.svg" alt="skype_account">
</div>

<p class="copyright">&copy; 2017 Chirca Razvan</p>

Answer 2

将width: 100%添加到段落中，或将flex-basis从auto更改为100%。

.svg {
  width: 50px;
  height: 50px;
}

.copyright {
  display: block;
  flex-basis: auto;/*change to 100%*/
  margin-left: 15px;
  margin-right: 15px;
  color: #fff;
width: 100%;/*or add this*/
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: rgb(9, 28, 41);
  padding: 30px 0;
  text-align: center;
}

<footer>
  <img class="image1 svg" src="https://upload.wikimedia.org/wikipedia/commons/c/c2/F_icon.svg" alt="facebook_profile">
  <img class="image2 svg" src="https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg" alt="tweeter_profile">
  <img class="image3 svg" src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Logo_google%2B_2015.png" alt="google_plus_profile">
  <img class="image4 svg" src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skype-icon.svg" alt="skype_account">
  <p class="copyright">&copy; 2017 Chirca Razvan</p>
</footer>

我如何能够将元素叠加在彼此之上？

2 个答案: