CSS와 함께 배경 이미지가 올바르게 표시되지 않습니다.

Question

이미지가 다른 아이콘 뒤에 올바르게 표시되지 않는 문제가 있습니다. 서라운드 아이콘에 두 개의 개별 이미지를 적용하고 있습니다. 첫 번째 화면은 잘 보이지만 두 번째 화면은 아래쪽으로 사라집니다.

#social-media .inner { 
    display: inline-block; 
    height: 74px; 
    padding: 0 0 0 30px; 
    background: url(http://www.everythingdisc.com/../images/footer-icon-bg-left.jpg) 0 0 no-repeat; 
} 

#social-media .inner .icons { 
    display: inline-block; 
    width: auto; 
    height: 59px; 
    padding: 15px 20px 0 0; 
    background: url(http://www.everythingdisc.com/../images/footer-icon-bg-right.jpg) top right no-repeat; 
} 

사람이 왜 이미지 속성을 표시하지 않습니다 알고 : 여기

<div class="inner"> 
    <div class="icons"> 
     <a href="https://www.linkedin.com/company/inscape-publishing?trk=company_name" id="linkedin">&nbsp;</a> 
     <a href="https://twitter.com/everything_disc " id="twitter">&nbsp;</a> 
     <a href="http://www.youtube.com/user/InscapeChannelDev" id="youtube">&nbsp;</a> 
    <div class="clear-left">&nbsp;</div> 
    </div> 
</div> 

http://everythingdisc.hubs.vidyard.com/ 내가 사용하고있어 CSS입니다 : 여기

는 오류가 바닥 글에 볼 수있는 사이트입니다 ?

Answer 1

두 div에 모두 동일한 높이를 지정해야합니다.

#social-media .inner { 
display: inline-block; 
height: 74px; 
padding: 0 0 0 30px; 
background: url(http://www.everythingdisc.com/../images/footer-icon-bg-left.jpg) 0 0 no-repeat; 
} 

#social-media .inner .icons { 
display: inline-block; 
width: auto; 
height: 74px; 
padding: 15px 20px 0 0; 
background: url(http://www.everythingdisc.com/../images/footer-icon-bg-right.jpg) top right no-repeat; 
} 

Answer 2

이미지의 왼쪽면을 표시하는 div는 높이가 74px이지만 오른쪽 절반을 표시하는 div는 59px 높이입니다. 또한 왼쪽 div에는 오른쪽 div가 포함되어 있고 오른쪽면의 표시를 엉망으로 만드는 30px의 아래쪽 패딩이 있습니다. 위치가 꺼져있을 수는 있지만 이미지가

.inner { 
 
    display: inline-block; 
 
    height: 74px; 
 
    padding: 0 0 0 30px; 
 
    background: url(http://www.everythingdisc.com/../images/footer-icon-bg-left.jpg) 0 0 no-repeat; 
 
} 
 

 
.inner .icons { 
 
    display: inline-block; 
 
    width: auto; 
 
    height: 74px; 
 
    padding: 15px 20px 0 0; 
 
    background: url(http://www.everythingdisc.com/../images/footer-icon-bg-right.jpg) top right no-repeat; 
 
}

<div class="inner"> 
 
     <div class="icons"> 
 
      <a href="https://www.linkedin.com/company/inscape-publishing?trk=company_name" id="linkedin">icon1</a> 
 
      <a href="https://twitter.com/everything_disc " id="twitter">icon2</a> 
 
      <a href="http://www.youtube.com/user/InscapeChannelDev" id="youtube">icon3</a> 
 
      <div class="clear-left">&nbsp;</div> 
 
     </div> 
 
    </div>