使div与图像水平对齐，并能够水平滚动它们
[英]Align divs with images horizontally and be able to scroll through them horizontally
问题描述
您好，我正在尝试制作一个看起来像我在各个城市中行驶的网站。
当我水平滚动浏览网页时，图像在背景中不断变化。
的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;
}
谢谢
2 个解决方案
解决方案1
3 已采纳 2015-10-15 14:08:17
简单的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;
}
解决方案2
1 2015-10-16 06:48:53
这样的事情：（是的，图像的宽度可以不同！）
<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>
如何在不同的div上水平对齐图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.