Wie kann ich Elemente übereinander stapeln?

Question

Also, ich habe dieses einfache Fußzeilenelement, in dem ich 4 Svg Bilder und einen Absatz verschachtelt.

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

Und das sind die Stile angewendet werden:

.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

Ich möchte, dass Absatz machen unter den Bildern mit einem gewissen Abstand zwischen ihnen erscheinen.

Answer 1

width: 100% auf den Absatz hinzufügen oder die flex-basisauto-100% ändern.

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

Answer 2

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