6 줄을 같은 줄에 넣는 방법은 무엇입니까?

Question

6 개의 div를 한 행에 넣고 각 div를 스프라이트로 사용하려는이 문제가 있습니다. 무슨 일이 일어나고있는 건지 2 개는 들어있는 div의 맨 위에 있고 나머지 4 개는 포함 된 div의 바깥에 있습니다. 나는 6 div의 너비 전체 크기와 일치하도록 너비가있는 div를 포함하여 모든 div float을 남기도록 조사했습니다. 나는 또한 여기에 다른 질문에 <br style="clear: left;" /> 여섯째 div 후하지만 여전히 포함 div하지만 내 문제를 해결하는 것 같다 발견했다. div를 포함하는이 div는 바닥 글 div의 안쪽에 있습니다.

CSS :

#footer { 
    width: 100%; 
    height: 135px; 
    background-color:#444;} 

#sprite { 
    margin: 0 auto; 
    width: 602px; 
    height: 35px; 
    /*background-image: url(images/sprite.png); 
    background-repeat: no-repeat; 
    background-position: left top;*/ 
} 


#ash { 
    width: 113px; 
    height: 35px; 
    float: left; 
    background: url(images/images/sprite1_01.png) no-repeat 0 0; 
} 

#ash:hover { 
    background-position:0 -35px; 

} 

#gateway { 
    margin: 0 auto; 
    width: 113px; 
    height: 35px; 
    background: url(images/images/sprite1_02.png) no-repeat 0 0; 
} 

#gateway:hover { 
    background-position:0 -35px; 

} 

#conect { 
    width: 113px; 
    height: 35px; 
    float: left; 
    background: url(images/images/sprite1_03.png) no-repeat 0 0; 
} 

#conect:hover { 
    background-position:0 -35px; 

} 

#peninsula { 
    width: 113px; 
    height: 35px; 
    float: left; 
    background: url(images/images/sprite1_04.png) no-repeat 0 0; 
} 

#peninsula:hover { 
    background-position:0 -35px; 

} 

#aza { 
    width: 75px; 
    height: 35px; 
    float: left; 
    background: url(images/images/sprite1_05.png) no-repeat 0 0; 
} 

#aza:hover { 
    background-position:0 -35px; 

} 

#greenscape { 
    width: 75px; 
    height: 35px; 
    float: left; 
    background: url(images/images/sprite1_06.png) no-repeat 0 0; 
} 

#greenscape:hover { 
    background-position:0 -35px; 

} 

HTML : 아래

<div id="sprite"> 


      <div id="ash"> 

      </div> <!-- end of ash div--> 

      <div id="gateway"> 

      </div> <!--end of gateway --> 

      <div id="conect"> 

      </div> <!-- end of conect --> 

      <div id="peninsula"> 

      </div> <!-- end of peninsula --> 

      <div id="aza"> 

      </div> <!-- end of aza --> 

      <div id="greenscape"> 

      </div> <!-- end of greenscape --> 


     <br style="clear: left;" /> 


</div> <!-- end of sprite --> 

가 브라우저에 앉아 어떻게 사진입니다.

Answer 1

당신이 이것을 놓쳤습니다.

#gateway { 
    float: left; 
}