1

Ниже приведён код вывода превью изображений, изображения выводятся горизонтально в одну линию, никак не могу добиться, чтобы когда количество превью превышает ширину блока, появлялась горизонтальная полоса прокрутки.

 <style type="text/css"> 
 .images{position:relative; float:left}
 </style>

и

 <?php if (isset($filenames)) : ?>
 <?php foreach ($filenames as $k => $filename) : ?>
   <div id="images">
     <img src="<?php echo HOST . 'imagesCatalog/' . $filename ?>" 
      alt="" id="photo_mini_<?php echo $k ?>"class="photo_mini" />
   </div>
 <?php endforeach ?>
 <?php endif ?>

Добавлено.

Вот пробовал так, но изображения переносятся на другую строку и появляется вертикальная прокрутка:

<div style="width:1024px;height:130px;overflow-x:scroll ">

<?php if (isset($filenames)) : ?>
<?php foreach ($filenames as $k => $filename) : ?>
    <div style="position:relative;float:left; height:130px;white-space: no-wrap "> 
      <img src="<?php echo HOST . 'imagesCatalog/' . $filename ?>" 
          alt="" id="photo_mini_<?php echo $k ?>" class="photo_mini" />
    </div>
<?php endforeach ?>
<?php endif ?>

</div>
2
  • попробуйте убрать 'float: left'. в плавающей модели элементы извлекаются из нормальной модели...это и может вызывать проблемы...
    – LeD4eG
    18 ноя 2011 в 17:59
  • Какие ещё могут быть варианты, потому как решение не найдено
    – Paraplegic
    18 ноя 2011 в 18:15

3 ответа 3

1
<div id="imagesStripe" style="overflow-x: scroll; white-space: no-wrap;"></div>

Меня, конечно, убъют за overflow-x, но без него вряд ли выйдет что-то сделать

5
  • Может, стоит складывать все в контейнер какой-то?
    – Gorets
    18 ноя 2011 в 10:39
  • Да уже всё перепробовал, ни фига не получается...
    – Paraplegic
    18 ноя 2011 в 11:01
  • 1
    Мне кажется, можно обойтись и без scroll-x, так как no-wrap и так добавит прокрутку горизонтальную.
    – LeD4eG
    18 ноя 2011 в 11:09
  • не пробывали пользоваться display: inline-block вместо float: left?
    – zippp
    18 ноя 2011 в 18:17
  • Пробовал, ничего не получаятся. Я так подозреваю, что для решения этой задачи нужно скрипт прописывать
    – Paraplegic
    19 ноя 2011 в 9:23
0

Попробуйте указать width и display:block; для картинок

0

указать width:auto; контейнеру не пробвали?

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.