html - 图像不会出现在 slider 旁边

标签 html css image slider

我的图像不会位于 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/

相关文章:

javascript - Angular4 社交媒体 Facebook 分享页面,包含详细信息

javascript - Jquery show() 不会等到完成

html - 容器内背景图像上的文本

html - 为什么我的网站背景图片的顶部和底部被截断(全屏图像背景)?

html - CSS 背景图片被截断

php - Onsubmit 填充一个数组,然后显示数组中的内容

javascript - 使div在单击时上下移动

html - CSS:顶部元素隐藏子元素溢出的背景

css - 在 css 网格模板中使用 sass 变量

image - RGB图像转二值图像