반응이 많은 아이콘 행

Question

저는 HTML과 CCS를 처음 사용하기 때문에 약간 개인 웹 사이트를 만들려고합니다. Sketch에서 디자인을 만들었으며 HTML 및 CSS에서 성공적으로 재현 할 수있었습니다. 아래쪽에는 Twitter, Instagram 및 Tumblr과 같은 세 개의 큰 아이콘이 있습니다. 큰 화면에서 웹 사이트는 멋지게 보입니다. 그러나 작은 화면에로드 할 때 나 빠진다. 세 아이콘이 각각 다른 아이콘 위에 겹치 길 원합니다. 여기에 보이는 그림이 있습니다 :

내가 원하는 것은 각각의 아이콘이 다른 아이콘 위에 있기 때문에 Instagram 아래의 Twitter이고 그 아래 Tumblr입니다. 저는 열을 설정하는 것과 같은 많은 일을 시도했으며 인터넷에서 많은 자습서를 보았습니다. 그러나 실제로 해결책을 찾지 못했습니다.

감사합니다.

편집 : 코드 부분 HTML

<div class="social-container"> 
<div class="twitter"> 
    <a href="http://twitter.com/jmml97" target="_blank"><img src="images/Twitter Logo.png" alt="Twitter"/></a> 
</div> 
<div class="instagram"> 
    <a href="http://instagram.com/jmml97" target="_blank"><img src="images/Instagram Logo.png" alt="Instagram"/></a> 
</div> 
<div class="tumblr"> 
    <a href="http://jmml97.tumblr.com" target="_blank"><img src="images/Tumblr Logo.png" alt="Tumblr"/></a> 
</div> 

CSS

.social-container { 
    margin-top: 100px; 
    display: block; 


    width: 60%; 
    margin: 8px auto; padding: 16px; 
    text-align: center; 

    -webkit-columns: 3 33%; 
    -moz-columns: 3 33%; 
    columns: 3 33%; 
} 

@media (max-width: 768px) { 

    .social-container { 
    -moz-columns: 1 100%; 
    -webkit-columns: 1 100%; 
    columns:   1 100%; 
    display: inline; 
    margin: 8px auto; 
} 

Answer 1

당신이 할 수있는 media 쿼리를 사용하여. 작은 화면을위한 스타일을 정의하십시오. 일반적으로 휴대 전화 크기의 화면 크기는 768 픽셀로 간주됩니다. 당신이 당신의 아이콘 img를 사용하는 경우

예를 들어, 당신은 단순히 작은 화면의 display을 변경할 수 있습니다 :

데모 바이올린을 : http://jsfiddle.net/abhitalks/rvjmk90e/

데모 코드 조각 :

div.jumbo { 
 
    background-color: #eee; 
 
    width: 60%; 
 
    margin: 8px auto; padding: 16px; 
 
    text-align: center; 
 
} 
 

 
@media (max-width: 768px) { 
 
    img { 
 
     display: block; 
 
     margin: 8px auto; 
 
    } 
 
}

<div class="jumbo"> 
 
    <h2>Hola</h2> 
 
    <img src="http://placehold.it/120x120/&text=tw" /> 
 
    <img src="http://placehold.it/120x120/&text=Ig" /> 
 
    <img src="http://placehold.it/120x120/&text=tm" /> 
 
</div>

Answer 2

반응 형 웹을위한 더 좋은 방법은 배경 background-image으로 이미지를 <img />를 사용하지만 삽입 할 수 없습니다.

media query은 width: 100%으로 설정하면 모든 것이 정상적으로 처리됩니다. 그들이 100 % 인 경우에, 그 자신의 밑에 함께 두십시오.