이미지가 인라인으로 변경됩니다.

이미지 슬라이더를 만들고 있습니다 .i 이미지를 인라인으로 표시하려고합니다. i도 css를 가지고 있지만 작동하지 않습니다. (이미지가 표시되지 않습니다. 어떤 속성을 변경해야합니까? 이미지가 인라인으로 변경됩니다.

이

<div id="f1_container"> 
    <div id="f1_card1" class="shadow"> 
     <div class="front face"> 
      <img src="thumb1.jpg" style="height: 281px; width: 450px;" /> 
     </div> 
     <div class="back face center"> 
      Some text inside here 
     </div> 
    </div> 
    <br/> 
    <br/> 

    <div id="f1_card2" class="shadow"> 
     <div class="front face"> 
      <img src="thumb2.jpg" style="height: 281px; width: 450px;" /> 
     </div> 
     <div class="back face center"> 
      text2 
     </div> 
    </div> 
</div>

내 CSS 파일,

#f1_container { 
    position: relative; 
    margin: 10px auto; 
    width: 450px; 
    height: 281px; 
    z-index: 1; 
} 
#f1_container { 
    -webkit-perspective: 1000; 
    perspective: 1000; 
} 
#f1_card { 
    width: 100%; 
    height: 100%; 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: all 1.0s linear; 
    transform-style: preserve-3d; 
    transition: all 1.0s linear; 
} 
#f1_container:hover #f1_card { 
    -webkit-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    box-shadow: -5px 5px 5px #aaa; 
} 
.face { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
} 
.face.back { 
    display: block; 
    -webkit-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    box-sizing: border-box; 
    color: white; 
    text-align: center; 
    background-color: #aaa; 
}

감사 감사입니다

출처

2013-04-25 anam

이미지 표시 줄 : 인라인 및 부동 소수점 : –

이미지는 기본적으로 인라인 수준 요소입니다. 그러나, 당신의 경우 이미지는 기본적으로 블럭 레벨 요소 인'div' 요소 안에 중첩됩니다. 따라서 여러분의 노력은'div' 컨테이너를 이미지가 아닌 인라인 레벨 요소로 만드는 것을 목표로해야합니다. – Boaz

스팬을 사용해 보셨습니까? btw 괜찮아 보이는 군. 문제가 뭔지 모르겠다. –