将 span 元素向右移动到 div 标记

Question

我有以下 html 代码。如何将带图像的 span 元素移到 div 标签的右侧？

下面是代码

    <div style='width:600px;padding-top: 2px;padding-bottom: 1px'>
            <span style='padding-left: 25px'>" + rank + "</span >
           <span style='padding-left: 35px'><img id='img1' class='img-rounded' alt='' width='50' height='50' src='test.jpg' /></span>
           <span style='position:absolute;padding-left: 30px' >" + o.Title + "</span>
          <span style='position:absolute;float:right'>
            <img   class='img-rounded' alt='' width='20' height='10' src='images/Information.png' />
         </span> 

  </div >

expected ouput

Answer 1

<div style='width:600px;padding-top: 2px;padding-bottom: 1px;border:1px solid red;'>
  <span style='padding-left: 25px'>" + rank + "</span >
  <span style='padding-left: 35px'><img id='img1' class='img-rounded' alt='' width='50' height='50' src='test.jpg' /></span>
  <span style='padding-left: 30px' >" + o.Title + "</span>
  <span style='float:right'>
{IMG}<img class='img-rounded' alt='' width='20' height='10' src='images/Information.png' />
  </span> 
</div >

Answer 2

float 和 position:absolute 不能同时使用 span 是内联元素，需要先将其设为块，然后才能按照您的预期运行。

<span style='display:block;float:right'>
    <img class='img-rounded' alt='' width='20' height='10' src='images/Information.png' />
</span>

将 span 元素向右移动到 div 标记

move span element right to div tag

javascript

css

html

webix