CSS - 한 줄의 div에 이미지 표시

Question

div 안에 3 개의 이미지가 있고 한 줄에 표시하려고합니다. 현재 코드에서 나오는 출력은 2 개의 이미지가 하나의 단일 라인이고 다른 하나가 하단에 있다는 것입니다.

도움이 될 것입니다. HTML의

내 코드 : CSS에 대한

<div id="slider_container"> 
      <div class="slider"> 
       <img id="1" src="Kid Playing Guitar_big.jpg" border="0" style="float:left;" /> 
       <img id="2" src="University Students_big.jpg" border="0" style="float:left;" /> 
       <img id="3" src="Business Man_big.jpg" border="0" style="float:left;" /> 
      </div> 
      <div class="slider_thumbnails"> 
       <img id="1" src="Kid Playing Guitar.jpg" border="0" /> 
       <img id="2" src="University Students.jpg" border="0" /> 
       <img id="3" src="Business Man.jpg" border="0" /> 
      </div> 
     </div> 

내 코드 : 당신이 당신의 대답을 게시 한 후

@CHARSET "UTF-8"; 

     #slider_container{ 
      height: 360px; 
      width: 720px; 
     } 

     .slider{ 
      width: 720px; 
      height: 360px; 
      overflow: hidden; 
      background-image: url(loading.gif); 
      background-repeat: no-repeat; 
      background-position: center; 
     } 

     .slider img{ 
      width: 480px; 
      height: 360px; 
      display: none; 
     } 

     .slider_thumbnails{ 
      width: 720px; 
      display:inline-block; 
     } 

     .slider_thumbnails img{ 
      display: inline-block; 
     } 

코드를 설명해주십시오.

Answer 1

.slider_thumbnails{ 
    width: 720px; 
    display:inline-block; 
    white-space:nowrap; 
} 

Answer 2

문제는 이미지의 너비가 컨테이너 너비와 같다고 생각합니다. 이미지 너비를 235로 변경해보십시오. jsfiddle에서 작동합니다.

Answer 3

float:left;은 어떨까요?

.slider img{ 
      float: left; 
      position: relative; 
      } 

float의 경우,은 매우 중요합니다. 따라서 측정 한 것을 잊지 말고 margin, padding 이후에 계산 된 적절한 너비를 정의하십시오.

Answer 4

.slider img{ 
      width: 480px; 
      height: 360px; 
      display: none; 
     } 

.slider_thumbnails{ 
      width: 720px; 
      display:inline-block; 
     } 

.slider_thumbnails img{ 
      display: inline-block; 
     }