Проблемы с выравниванием текста

Question

У меня возникли проблемы с text-align = top; в моем CSS. Я хочу, чтобы элемент абзаца был выровнен вверху и справа от моего изображения. Он отлично работает на первой строке, но вторая строка все еще находится под моим изображением. Я пробовал также делать выравнивание по горизонтали; но это не для меня.

В W3C страница я смотрел на это следующим образом: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

код СМЧ ниже:

img.top { 
    vertical-align: text-top; 
} 

И это часть HTML, который я пытаюсь манипулировать.

<p> 
<img class = top src="../images/myImage.gif" alt="A curious stack question"/> 
    Many questions <br/> 
    Are most certainly to come 
</p> 

Подозреваю часть вопроса является <br/>, как без него текст действительно становится выровненной к вершине; но я требую <br/> в этом месте для форматирования. Я думал об использовании <pre>; но я не уверен, что это будет лучшее решение.

Answer 1

Как вы привязаны к этой структуре? Вы могли бы сделать это вместо:

HTML:

<img class="top" src="..img/img.jpg"/> 
<p> 
    Many questions <br/> 
    Are most certainly to come 
</p> 
<div class="clear"></div> 

CSS:

img.top { 
    float: left; 
} 

.clear { 
    clear: both; 
} 

FIDDLE:https://jsfiddle.net/6pwry2nn/