html - br 没有按要求工作

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>在这种情况下会产生问题。但我需要以与图像类似的方式显示主要和次要。请提供任何替代方案。

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/