2010-12-10 1 views
1

Вот сделка. У меня есть контейнер DIV шириной 100%. И внутри этого DIV у меня есть тонны пустых DIV, плавающих слева с дисплеем: блок на них. (для целей тестирования)Переполнение: авто и DIV Задача

У меня переполнение-x: авто на контейнере.

Как только последний div достигает конца элемента контейнера, он переходит к следующей строке вместо того, чтобы оставаться в очереди с другими DIV и запускать полосу прокрутки на контейнере.

Как сохранить DIV от перехода к следующей строке и заставить их вызывать поведение прокрутки на контейнере?

С благодарностью!

Вот ПОС, чтобы помочь: alt text

+0

Вы оба правы! Спасибо огромное! – Alex 2010-12-10 15:09:00

ответ

3
<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> 
+0

Я заметил, что вы ставили периоды в DIV. Означает ли это, что DIV нуждается в чем-то внутри, чтобы это работало правильно? – Alex 2010-12-10 15:05:43

1

Вы пробовали white-space:nowrap;?

Вам также может потребоваться переключиться на использование display:inline-block;, а не float:left;.