Выравнивать divs с изображениями по горизонтали и прокручивать их по горизонтали

-1

Привет, я пытаюсь создать веб-сайт, похожий на то, что я проезжаю через различные города.Выравнивать divs с изображениями по горизонтали и прокручивать их по горизонтали

Поскольку я просматриваю веб-страницу по горизонтали, изображения меняются в фоновом режиме.

Some thing like this, but I want to add the images as a div and not an image.

here is my jsfiddle

HTML

<body> 
    <div style="height:400px; width:100%; clear:both;"></div> 
    <div class="image-holder"> 
     <img src="http://www.japaneseammo.com/wp-content/uploads/2014/12/bigstock-Mt-Fuji-with-fall-colors-in-j-48491102.jpg" alt=""> 
    </div> 
    <div class="image-holder"> 
     <img src="http://www.japaneseammo.com/wp-content/uploads/2014/12/bigstock-Mt-Fuji-with-fall-colors-in-j-48491102.jpg" alt=""> 
    </div> 
     <div class="image-holder"> 
     <img src="http://www.japaneseammo.com/wp-content/uploads/2014/12/bigstock-Mt-Fuji-with-fall-colors-in-j-48491102.jpg" alt=""> 
    </div> 
      <div class="image-holder"> 
     <img src="http://www.japaneseammo.com/wp-content/uploads/2014/12/bigstock-Mt-Fuji-with-fall-colors-in-j-48491102.jpg" alt=""> 
    </div> 
       <div class="image-holder"> 
     <img src="http://www.japaneseammo.com/wp-content/uploads/2014/12/bigstock-Mt-Fuji-with-fall-colors-in-j-48491102.jpg" alt=""> 
    </div> 
    <!-- Image of me just standing or probably an image created in Sketch --> 
    <div id="my-"> 

    </div> 
</body>

CSS

.container{ 
    width:50%; 
    margin:0 auto; 
} 
.container span{ 
    width:30%; 
    margin:0 1%; 
} 
#walking-man{ 
    position: fixed; 
    width: 300px; 
    height: 100px; 
    background-color: red; 
}

Спасибо

источник

2015-10-15 gkmohit

Это вы уже сделали? – Kristine

@ Kristine нет, это не то, что я сделал, его то, что я нашел в Интернете. , , – gkmohit

Не могли бы вы добавить скрипку или что-то, что вы уже пробовали? – Kristine

простой HTML:

<div class="background"> 
    <img src="your image" alt=""> 
    <img src="your image" alt=""> 
    <img src="your image" alt=""> 
    <img src="your image" alt=""> 
</div> 

<div class="content"></div>

и CSS:

.background { 
    position:absolute; 
    z-index:-1; 
    top:0; 
    left:0; 
    white-space:nowrap; 
} 
.background img { 
    display:inline-block; 
}

FIDDLE

источник

2015-10-15 14:08:17

Что-то вроде этого: (! Да, изображения могут быть разной ширины)

<ul class="images"> 
    <li><a href="#"><img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" width="auto" height="150"/></a></li> 
    <li><a href="#"><img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" width="auto" height="150"/></a></li> 
    <li><a href="#"><img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" width="auto" height="150"/></a></li> 
    <li><a href="#"><img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" width="auto" height="150"/></a></li> 
    <li><a href="#"><img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" width="auto" height="150"/></a></li> 
    <li><a href="#"><img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" width="auto" height="150"/></a></li> 
    <li><a href="#"><img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" width="auto" height="150"/></a></li> 
</ul> 
<style> 
ul.images { 
    margin: 0; 
    padding: 0; 
    white-space: nowrap; 
    width: auto; 
    overflow-x: auto; 
    background-color: #ddd; 
} 
ul.images li { 
    display: inline; 
    width: auto; 
    height: 150px; 
} 
</style>

http://jsfiddle.net/wSfJd/

источник

2015-10-16 06:48:53 Kristine

Выравнивать divs с изображениями по горизонтали и прокручивать их по горизонтали

ответ

Смежные вопросы