Почему мой div не прокручивается горизонтально при добавлении нескольких изображений? - PullRequest
Новая
       20

Почему мой div не прокручивается горизонтально при добавлении нескольких изображений?

2 голосов
/ 10 марта 2010

У меня есть внешний div, и внутри него у меня есть внутренний div, который содержит список изображений. Когда изображения шире, чем внешний div, я хочу, чтобы он прокручивался горизонтально, но вместо этого он просто помещает изображение на следующую строку, а не расширяется. Если я добавлю много строк, div прокручивает по вертикали, но по горизонтали не делает. Это происходит в каждом браузере, который я пробовал - Firefox, Chrome, IE и Safari.

Вот CSS: 

#grid-container   { left:33px; position:relative; width:300px; }
#grid   { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul   { width:305px; }
#grid-container li   { float:left; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center; }

.image-row   { float:left; margin-left: 10px; }
.grid-image   { height:50px; margin-left:-20px;  }

Вот HTML: 

<div id="grid-container">
  <div id="grid"> 
    <div id="row1" class="image-row"> 
      <ul> 
        <li> 
          <img id="img1" class="grid-image" src="images/img1.jpg"> 
        </li>
        <li>
          <img id="img2" class="grid-image" src="images/img2.jpg"> 
        </li>
        <li>
          <img id="img3" class="grid-image" src="images/img3.jpg"> 
        </li>
        <li>
          <img id="img4" class="grid-image" src="images/img4.jpg"> 
        </li>
      </ul>
    </div>
    <div id="row2" class="image-row"> 
      <ul> 
        <li> 
          <img id="img5" class="grid-image" src="images/img5.jpg"> 
        </li>
        <li>
          <img id="img6" class="grid-image" src="images/img6.jpg"> 
        </li>
      </ul>
    </div>
  </div>
</div>

Проблема в том, что img4 отображается во втором ряду (с img5 и img5 в третьем ряду), даже если он должен отображаться в первом ряду, а элемент grid должен прокручиваться горизонтально. Это прокручивать вертикально. Могу ли я заставить div расширяться? Если я уберу ширину из сетки, я получу горизонтальную полосу прокрутки, но изображение все еще находится во втором ряду.

Ответы [ 4 ]

6 голосов
/ 16 марта 2010

Будет ли это делать? Я несколько упростил это.

CSS (вы можете удалить границы, они просто, чтобы вы могли видеть, что происходит): 

#grid-container {position: relative; width: 300px; height: 400px; overflow: auto; border: 1px red solid;}
#grid {border: 1px blue solid;}
#grid ul {height: 40px; list-style-type: none; white-space: nowrap; padding: 0; margin: 0; border: 1px green solid;}
#grid ul li {display: inline; padding: 0; margin: 0;}
#grid ul li img {height: 50px;}

HTML: 

<div id="grid-container">
 <div id="grid">
  <ul>
    <li><img src="testimage.jpg"></li>
    <li><img src="testimage.jpg"></li>
    <li><img src="testimage.jpg"></li>
    <li><img src="testimage.jpg"></li>
    <li><img src="testimage.jpg"></li>
    <li><img src="testimage.jpg"></li>
  </ul>
  <ul>
   <li><img src="testimage.jpg"></li>
   <li><img src="testimage.jpg"></li>
   <li><img src="testimage.jpg"></li>
  </ul>
 </div>
</div>
1 голос
/ 17 марта 2010

Вам нужно поставить пробел: nowrap; на тегах UL и LI. Вам также нужно, чтобы элементы LI отображались внутри, а не с плавающей точкой.

CSS: 

#grid-container   { left:33px; position:relative; width:300px; }
#grid   { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul   { width:305px; }
#grid-container li   { 
    display:inline;
   list-style-type:none; 
    padding:5px 15px 5px 15px; 
    height:88px; 
    margin:0;
    text-align:center; 
}

ul, li{
    white-space:nowrap;
}

HTML: 

<div id="grid-container">
<div id="grid"> 
<div class="image-row"> 
  <ul> 
    <li> 
      <img id="img1" class="grid-image" src="test.jpg" /> 
    </li>
    <li>
      <img id="img2" class="grid-image" src="test.jpg" /> 
    </li>
    <li>
      <img id="img3" class="grid-image" src="test.jpg" /> 
    </li>
    <li>
      <img id="img4" class="grid-image" src="test.jpg" /> 
    </li>
  </ul>
</div>
<div class="image-row"> 
  <ul> 
    <li> 
      <img id="img5" class="grid-image" src="test.jpg" /> 
    </li>
    <li>
      <img id="img6" class="grid-image" src="test.jpg" /> 
    </li>
  </ul>
</div>

Это работает в последних версиях IE, FF, Safari и Chrome.

0 голосов
/ 16 марта 2010

Вы уже на правильном пути: ваш подход к установке "float: left;" на <li> s, в сочетании с настройкой «width: 305px» на <ul> s, в основном, должно работать, чтобы избежать падения с плавающей запятой.

Однако несколько вещей, которые нужно проверить:

  1. Достаточно ли 305px? (должно быть не меньше, чем общая ширина элементов в строке 1, включая поля, отступы и границы). Попробуйте установить для этого значения намного большее overflow: auto не поможет, так как поплавки всегда будут оборачиваться вместо того, чтобы вызывать переполнение. Настройка достаточно большой ширины прекрасно работает для меня (по крайней мере, в моем собственном примере).

Другие вещи, которые можно попробовать:

  • Попробуйте это без плавающего ".image-row".
  • Попробуйте установить ширину изображений.
  • В вашем HTML дважды указан идентификатор "row1" - это неверно.
0 голосов
/ 16 марта 2010

попробуйте это: 

#grid-container li { 
  display: inline;
  list-style-type:none; 
  padding:5px 15px 5px 15px; 
  height:88px; 
  text-align:center;
  white-space: nowrap;
}
...