Блог

Главная - Вопросы по программированию - выровнять изображения по горизонтали?

выровнять изображения по горизонтали?

#html #css

#HTML #css

Вопрос:

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

итак, как я могу установить все изображения по горизонтали (2 изображения на экране, остальные скрыты как переполнение свойства контейнера: скрыто)

синий — это контейнер, а зеленые поля — изображения.

введите описание изображения здесь

код

         <div id="slidearea">
<div id="slider">

        <img alt="image" id="0" src="images/thum-1.jpg" style="margin-right: 5px; opacity: 0.5; border-color: rgb(255, 255, 255);">

        <img alt="image" id="1" src="images/thum-2.jpg" style="margin-right: 5px; opacity: 0.5;">

        <img alt="image" id="2" src="images/thum-3.jpg" style="margin-right: 5px; opacity: 0.5;">

        <img alt="image" id="3" src="images/thum-1.jpg" style="margin-right: 5px; opacity: 0.5;">

        <img alt="image" id="4" src="images/thum-2.jpg" style="margin-right: 5px; opacity: 0.5;">

        <img alt="image" id="5" src="images/thum-3.jpg" style="opacity: 0.5;">
        </div>
        </div>

Комментарии:

1. Таким образом, вы говорите, что первые два изображения выровнены правильно, но другие находятся дальше и не совпадают с первыми двумя? Совпадают ли они друг с другом? Например, все ли изображения 3 выровнены, а изображения 1 и 2 выровнены, но только не эти две группы?

Ответ №1:

Вы делаете это с помощью white-space amp; inline-block properties.

Например, так:

 #container{
    overflow:hidden;
    width:300px;
    margin:30px auto;
    background:yellow;
}
#container #slider{
    white-space:nowrap;
}
img{
    opacity:0.5;
    display:inline-block;
    *display:inline;/*IE*/
    *zoom:1;/*IE*/
    background:red;
}

Проверьте скрипку http://jsfiddle.net/SNeVH/1 /