오버 플로우 및 플로트는

Question

나는이 HTML 마크 업을 가지고

<div class="chatbar"> 
     <div class="chatbox" style="margin-right:0px"> first</div> 
     <div class="chatbox" style="margin-right:5px"> chatbox</div> 
     <div class="chatbox" style="margin-right:10px"> chatbox</div> 
     <div class="chatbox" style="margin-right:15px"> chatbox</div> 
      <div class="chatbox" style="margin-right:20px"> chatbox</div> 
       <div class="chatbox" style="margin-right:25px"> chatbox</div> 


    </div> 

나는 수평 스크롤 .. 그러나 여기에서의 작업이 아닌 것은 내 CSS입니다

.chatbox{ 
float:right; 

    height: 180px; 
width: 250px; 
margin-right:10px; 
border-right:1px solid red; 
border-left:1px solid red; 
} 

.chatbar { 
border: 1px solid blue; 
    overflow-x:scroll; 
overflow-y:hidden; 
width: 980px; 
height: 200px; 
position: relative; 
bottom:10px; 

float:right;// 

} 

요소가 추가되어 함께 chatbar의 사업부를 갖고 싶어 서로에 대한 해결책을 찾기를 바랍니다.

Answer 1

.chatbox CSS에 'position : relative'를 추가해보세요.

.chatbar { width:200px; overflow-x:auto; overflow-y:hidden; } 
    .wrapper { width: 600px; } 
    .chatbox { width:100px; float:left; } 

    <div class="chatbar"> 
     <div class="wrapper"> 
      <div class="chatbox"> first</div> 
      <div class="chatbox"> chatbox</div> 
      <div class="chatbox"> chatbox</div> 
      <div class="chatbox" > chatbox</div> 
      <div class="chatbox" > chatbox</div> 
      <div class="chatbox" > chatbox</div> 
     </div> 
    </div>