我的图像不会位于 slider 旁边.. 而只是堆叠在 slider 下方。好像没有空间放置图像,因为 slider 占用了太多空间,但是当我查看代码时,情况似乎并非如此,除非我错过了什么:)
This is my HTML:
<div id="content">
<div class="bx.wrapper">
<ul class="bxslider">
<li><img class="photo" src="IMG/pic_0001.jpg"></li>
<li><img class="photo" src="IMG/pic_0012.jpg"></li>
</ul>
</div>
<div id="hours">
<img src="IMG/hoursdk.png"/></div>
</div>
还有我的 CSS:
#hours{
position:relative;
right:150px;
width:20%;
height:10%;
}
.bx-wrapper {
position: relative;
width:100%;
margin-left:-30px;
}
ul.bxslider {
margin-top: 60px;
padding: 0;
}
.bx-wrapper img {
min-width:30%;
max-width: 40%;
display: block;
我从 BXslider 获得了 CSS,我已经删除了一些不必要的东西,例如控件和分页器。
最佳答案
你的意思是这样的吗? Check here
<div id="content">
<div class="bx-wrapper">
<ul class="bxslider">
<li><img class="photo" src="http://placehold.it/350x150"></li>
<li><img class="photo" src="http://placehold.it/350x150"></li>
</ul>
</div>
<div id="hours">
<img src="http://placehold.it/350x150"/></div>
</div>
CSS
.bx-wrapper, #hours{
display:inline-block;
}
.bx-wrapper{
float:left;
}
#hours{
float:right;
}
.bxslider{
list-style: none;
}
关于html - 图像不会出现在 slider 旁边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32631623/