Question

您好我正在努力建立一个看起来像是在各个城市开车的网站。

当我水平滚动网页时，图像会在后台不断变化。

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

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;
}

谢谢

Answer 1

简单的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

Answer 2

这样的事情:(是的，图像的宽度可以不同！）

<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/

将div与图像水平对齐，并能够水平滚动它们

2 个答案: