Question

我的图片不会被放置在滑块旁边..而是它只是堆叠在它下面。这就像没有图像的空间一样，因为滑块占用了太多的空间，但是当我看到代码时看起来并不是这样，除非我错过了一些东西：）

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，我已经删除了一些不必要的东西，比如控件和寻呼机。

Answer 1

你是说这样的意思吗？ 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;
}

图像不会出现在滑块旁边

1 个答案: