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

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 元素中添加了样式属性：

<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>

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

Placed an image beside the image banner on the right

html

css

jpeg

division