我如何将元素叠加在一起？

所以，我有这个简单的页脚元素，其中我嵌套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

我想使该段出现下面的图片与他们之间的一些空间。

来源

2017-01-02 Razvan Chirca

使用是真的有必要Flexbox的？在我看来，你使用的方式太多的CSS声明，只使用'text-align：center'就足够了。 [的jsfiddle]（https://jsfiddle.net/rickyruizm/vLajohfy/）。 – Ricky

添加width: 100%段落，或更改auto的flex-basis到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>

来源

2017-01-02 19:15:16 pol

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

来源

2017-01-02 19:00:53 Hokusai

我如何将元素叠加在一起？

回答

相关问题