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

浮点数和位置：绝对不会同时也是一个内联元素，需要在它按照你想要的方式运行之前进行阻塞。

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

将span元素移动到div标签

2 个答案: