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/