不按要求工作

Question

我想创建一个包含一些数据的div。需要如下图所示：

我使用了html，如下所示：

<div class="mydiv">
     <span>Major</span><br>
     <span>Minor</span>
     <span style="float: right; margin-right:5%" id="span_store">
         <img src="edit.png">
         <a onmousedown="javascript:myfun('name');" style="padding-left:10px"></img>
                <img src="active.png"></img>
         </a>
     </span>
 </div>

我希望最右侧的2幅图像出现在两者之间（即既不是顶部也不是底部）。我怎样才能做到这一点。

我认为<BR>在这种情况下会产生问题。但我需要以与图像类似的方式显示Major和Minor。请提供任何替代方案。

Answer 1

将您的HTML更改为：

<div class="mydiv">
   <span style="float: right; margin-right:5%" id="span_store">
     <img src="edit.png" style="display:block"/>
     <a onmousedown="javascript:myfun('name');" 
         style="padding-left:10px display:block">
            <img src="active.png"/>
     </a>
   </span>
   <span style="display:block">Major</span>
   <span style="display:block">Minor</span>

</div>

所以我改变了事情

1. 已移除</img>因为不需要关闭并在一个地方结束标记
2. 将“img”span移到其他位置之上，以便浮动工作
3. 标记为display:block以填充整行，这比br标记更受欢迎。因为它更灵活，有助于解决浮动问题，例如
4. 您有img个a标记，这不起作用：

代码小提琴：

http://jsfiddle.net/RcKRb/2/