오버플로 : 자동 및 DIV 문제

여기 거래가 있습니다. 너비가 100 % 인 컨테이너 DIV가 있습니다. 그리고 그 DIV 안에는 왼쪽에 빈 DIV가 떠있었습니다. 그들 위에 블럭이 있습니다. (테스트 용)오버플로 : 자동 및 DIV 문제

컨테이너에 overflow-x : auto가 있습니다.

마지막 div가 컨테이너 요소의 끝에 도달하면 다른 div와 줄을 서서 컨테이너에 스크롤 막대를 시작하는 대신 다음 div로 떨어집니다.

어떻게 DIV가 다음 줄로 떨어지지 않고 컨테이너에서 스크롤 동작을 실행하게합니까?

감사합니다. alt text

2010-12-10 Alex

모두 옳다! 정말 고맙습니다! – Alex

<html> 
    <head> 
     <style type="text/css"> 
      #container { 
       white-space:nowrap; 
      } 

      .child { 
       background-color:#dddddd; 
       display:inline-block; 
       height:100px; 
       width:100px; 

       /* Trick FF2 into using inline-block */ 
       display:-moz-inline-stack; 

       /* Trick IE6 into using inline-block */ 
       *display: inline; 
       zoom:1; 
      } 
     </style> 
    </head> 
    <body> 

     <div id="container"> 

      <div class="child">.</div> 
      <div class="child">.</div> 
      <div class="child">.</div> 
      <div class="child">.</div> 
      <div class="child">.</div> 
      <div class="child">.</div> 
      <div class="child">.</div> 
      <div class="child">.</div> 
      <div class="child">.</div> 
      <div class="child">.</div> 

     </div> 

    </body> 
</html>

출처

2010-12-10 14:30:38 michael

DIV에 마침표를 넣었습니다. DIV가 제대로 작동하려면 내부에 DIV의 필요가 있음을 의미합니까? – Alex

DIV에 내용을 넣을 필요가 없습니다. 코드를 테스트하는 방법이었습니다. – michael

당신이 white-space:nowrap;를 시도 : 여기

은 도움이되는 그림이다?

float:left; 대신 display:inline-block;을 사용해야 할 수도 있습니다.

출처

2010-12-10 14:25:25 Spudley

오버플로 : 자동 및 DIV 문제

답변

관련 문제