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>在这种情况下会产生问题。但我需要以与图像类似的方式显示 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高于其他，所以 float 有效
3. 将跨度标记为 display:block填充整行，这优于 br标签。因为它更灵活，有助于解决 float 问题，例如这个
4. 你有一个img附上一个 a标签，这行不通:

代码 fiddle :

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