Question

我正在尝试进行锻炼并尝试将图像文件放在图像页面横幅旁边，但它没有显示为预期的

HTML

<div class="slider">
 <ul class= "banner">
    <li><img src ="image.jpg"/></li>
     <li><img src ="image1.jpg"/><li>
</ul>

</div>

这是我编码显示在右边的图像，它放在div之后

<ul>
<li> <img src="test.jbg"><li>
</ul>

我想添加一个不在页面横幅中的图像显示在右上方，与图像幻灯片横幅对齐

但它始终显示在图像滑块底部的问题

CSS

.rslides {
  position: relative;
  padding: 0;
  margin: 0;
  }

.rslides li {
   position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  float: left;
  }

.rslides img {
    float: left;
    border: 0;
    width: 100%;
    border-top: 10px solid #454545;
  }

放入图像 Slide

我用黄色阴影的那个，不是我的图像幻灯片内嵌..所有我需要与横幅在同一行，但它总是显示为第二行

Answer 1

试试这段代码，我刚在div元素中添加了style属性：

<div style="float:left;" class="slider">
<ul class= "banner">
<li><img src ="p1.png"/></li>
<li><img src ="p2.jpg"/><li>
</ul>

</div>

<ul>
<li> <img src="p3.jpg"><li>
</ul>

<style>
.rslides {
position: relative;
padding: 0;
margin: 0;
}

.rslides li {
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}

.rslides li:first-child {
position: relative;
float: left;
}

.rslides img {
float: left;
border: 0;
width: 100%;
border-top: 10px solid #454545;
}
</style>

在右侧的图像横幅旁边放置一个图像

1 个答案: