동일한 줄에 텍스트 및 소셜 미디어 아이콘을 배치하는 방법

내 한 페이지 웹 사이트의 바닥 글에있는 텍스트의 양쪽에 x2 소셜 미디어 아이콘을 정렬하려고합니다.동일한 줄에 텍스트 및 소셜 미디어 아이콘을 배치하는 방법

다음은 데스크탑/와이드 스크린에 표시하는 방법의 예입니다. Desktop/Wide Screens

다음은 모바일/좁은 화면에 표시하는 방법의 예입니다. Mobile/Narrower Screens

나는 내가 지금까지

P.S. (현재의 소셜 미디어 아이콘 없음)가 그 아래에 내 코드를 입력 내 소셜 미디어 아이콘 facebook.png 및 twitter.png로 저장됩니다

body { 
 
    background-color: #000; 
 
    font-family: 'Roboto Mono', 'Arial', sans-serif; 
 
    font-size: 250%; 
 
    font-weight: 300; 
 
} 
 

 
.logo { 
 
    display: block; 
 
    margin: 50px auto; 
 
} 
 

 

 
p { 
 
    color: #ccc; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
} 
 

 
.coming-soon { 
 
    color: #333; 
 
    letter-spacing: 3px; 
 
} 
 

 
.autumn-2017 { 
 
    color: #ccc; 
 
} 
 

 
section p { 
 
    display: block; 
 
    margin: 50px auto 10px; 
 
    font-size: 35%; 
 
    text-transform: none; 
 
    letter-spacing: 3px; 
 
    line-height: 25px; 
 
    color: #333; 
 
} 
 

 
.contact-info { 
 
    margin: 15px auto; 
 
    letter-spacing: 3px; 
 
    line-height: 25px; 
 
    color: #ccc; 
 
    text-decoration: none; 
 
    text-transform: none; 
 
    font-size: 35%; 
 
} 
 

 
a:link, 
 
a:visited { 
 
    text-decoration: none; 
 
    color: #ccc; 
 
    transition: font-weight 0.2s; 
 
} 
 

 
a:hover, 
 
a:active { 
 
    text-decoration: none; 
 
    color: #ccc; 
 
    font-weight: 500; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="desctription" content="Web Design & Development"> 
 
     
 
     <link rel="stylesheet" type="text/css" href="normalize.css"> 
 
     <link rel="stylesheet" type="text/css" href="grid.css"> 
 
     <link rel="stylesheet" type="text/css" href="style.css"> 
 
     <link rel="stylesheet" type="text/css" href="queries.css"> 
 
     <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700" rel="stylesheet"> 
 
    
 
     <meta name="msapplication-config" content="resources/favicons/browserconfig.xml"> 
 
     
 
    </head> 
 
    <body> 
 
     <header> 
 
      
 
      <div> 
 
       <img src="iz-icon-logo.png" class="logo" alt="logo"> 
 
       <p><span class="coming-soon">coming soon.</span><span class="autumn-2017">&nbsp;autumn 2017.</span></p> 
 
      </div> 
 
      
 
     </header> 
 
     <section> 
 
      <div> 
 
       <p>If you have a Web Design or Development enquiry,<br>please contact:</p> 
 
       <p class="contact-info"><a href="mailto:[email protected]">[email protected]</a><br><a href="tel:07903490453">+44 (0) 7903 490453</a></p> 
 
      </div> 
 
      
 
     </section> 
 
    </body> 
 
</html>

출처

2017-09-26 GTM1

을 사용할 수 있습니다 문제는 무엇입니까? – Shogunivar

그것은 Flexbox 및 @media 쿼리의 적절한 사용과 order 속성을 달성 할 수있다 :

당신이 할 수있는 이 JSFiddle을 선택하여 브라우저 크기로 재생하십시오.

footer { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
footer p { 
 
    margin: 0 30px; 
 
} 
 

 
@media (max-width: 480px) { 
 
    footer { 
 
    flex-direction: column; 
 
    } 
 
    
 
    footer i{ 
 
    order: 2; 
 
    } 
 
}

<footer> 
 
    <i>icon one</i> 
 
    <p>links</p> 
 
    <i>icon two</i> 
 
</footer>

출처

2017-09-26 09:51:01

당신은 대답은 맞지만 그의 경우에는 스크린만큼 넓은 텍스트가있는 모바일 화면에서 데스크탑보기를 얻으려고 시도 할 때 작동하지 않을 것입니다. –

그리고 왜 @PraveenM이 작동하지 않습니까? –

그가 제공 한 링크를 살펴보십시오. https://i.stack.imgur.com/lBtmv.jpg 그 텍스트는 스크린과 거의 같은 크기이며, 그/그녀는 그것의 양쪽에 두 개의 이미지를 놓기를 원합니다. –

당신은 우리가 지금까지 어디서 무엇을 시도했다 볼 수 있습니다 당신은 당신의 코드를 추가 할 수 있습니다 CSS 위치 속성

body { 
 
    background-color: #000; 
 
    font-family: 'Roboto Mono', 'Arial', sans-serif; 
 
    font-size: 250%; 
 
    font-weight: 300; 
 
} 
 

 
.logo { 
 
    display: block; 
 
    margin: 50px auto; 
 
} 
 

 

 
p { 
 
    color: #ccc; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
} 
 

 
.coming-soon { 
 
    color: #333; 
 
    letter-spacing: 3px; 
 
} 
 

 
.autumn-2017 { 
 
    color: #ccc; 
 
} 
 

 
section p { 
 
    display: block; 
 
    margin: 50px auto 10px; 
 
    font-size: 35%; 
 
    text-transform: none; 
 
    letter-spacing: 3px; 
 
    line-height: 25px; 
 
    color: #333; 
 
} 
 

 
.contact-info { 
 
    margin: 15px auto; 
 
    letter-spacing: 3px; 
 
    line-height: 25px; 
 
    color: #ccc; 
 
    text-decoration: none; 
 
    text-transform: none; 
 
    font-size: 35%; 
 
} 
 

 
a:link, 
 
a:visited { 
 
    text-decoration: none; 
 
    color: #ccc; 
 
    transition: font-weight 0.2s; 
 
} 
 

 
a:hover, 
 
a:active { 
 
    text-decoration: none; 
 
    color: #ccc; 
 
    font-weight: 500; 
 
} 
 

 

 
/* NEW CSS */ 
 

 
.footer-container{ 
 
    position:relative; 
 
    padding:0 50px; 
 
    text-align:center; 
 
    max-width:300px; 
 
    margin:0 auto; 
 
} 
 

 
.ico{ 
 
    background-color:#333; 
 
    display:inline-block; 
 
    width:36px; 
 
    height:36px; 
 
    line-height:36px; 
 
    font-size:12px; 
 
    text-align:center; 
 
    border-radius:36px; 
 
    color:#FFF; 
 
    
 
    position:absolute; top:50%; margin-top:-18px; 
 
} 
 

 
.fb{ left:0; } 
 
.tw{ right:0; } 
 

 

 
@media (max-width: 768px) { 
 
    .footer-container{ padding:0; } 
 
    .ico{ position:static; margin-top:0px; } 
 

 
}

<header> 
 
    <div> 
 
     <img src="iz-icon-logo.png" class="logo" alt="logo" /> 
 
     <p> 
 
     <span class="coming-soon">coming soon.</span><span class="autumn-2017">&nbsp;autumn 2017.</span> 
 
     </p> 
 
    </div> 
 
</header> 
 

 
<section> 
 
    <div> 
 
     <p>If you have a Web Design or Development enquiry,<br>please contact:</p> 
 
     <div class="footer-container"> 
 
     <p class="contact-info"> 
 
     <a href="mailto:[email protected]">[email protected]</a><br> 
 
     <a href="tel:07903490453">+44 (0) 7903 490453</a> 
 
     </p> 
 
     <span class="ico fb">Fb</span> 
 
     <span class="ico tw">Tw</span> 
 
     </div> 
 
    </div> 
 
</section>

출처

2017-09-26 10:08:56 Mahmoud

건배 Mahmoud, 위 코드를 시도해 보았습니다. 새로운 텍스트 파일에서 작업했을 때 효과적 이었지만, 내 자신의 코드는 아이콘이 42px의 작은 크기로 바뀌지 않을 것이고 CSS에서 묻기 때문에 텍스트의 양쪽에 표시 할 수 없습니다. 위 코드를 편집하고 웹 사이트의 실제 사진을 편집했습니다. 그 이상을 도울 수 있다면 기꺼이 GTM1과 함께 – GTM1

이 될 것입니다. 제대로 이해했다면 코드에 아이콘이 표시되지 않기 때문에 푸터의 텍스트 옆에 소셜 네트워크의 두 아이콘을 추가하려고합니다. – Mahmoud

동일한 줄에 텍스트 및 소셜 미디어 아이콘을 배치하는 방법

답변

관련 문제