CSS для плавающего изображения слева от заголовка

Question

Если я хочу разместить изображение слева от заголовка, то, как я обычно это делаю, это что-то такое:

<img src="html5_connectivity.svg" width="90" height="90" alt="[HTML5 Connectivity Logo]" class="FloatLeft" />
<h3 data-anchorid="sockets">Connectivity</h3>

Хотите, чтобы я хотел, чтобы тот же визуальный эффект, плавать изображение вслева от заголовка, но тег заголовка изображения должен следовать после заголовка в документе, например:

<h3 data-anchorid="sockets">Connectivity</h3>
<img src="html5_connectivity.svg" width="90" height="90" alt="[HTML5 Connectivity Logo]" class="FloatLeft" />

Я не могу понять, какие трюки CSS (предпочтительно CSS уровня 2.1) позволят это сделать.Есть предложения?

Answer 1

Я бы поставил левое поле или отступ для h3 и отрицательное верхнее поле для img.

Answer 2

Вы можете установить margin-left для вашего заголовка, тогда ваше изображение будет идти до конца, а заголовок будет после него.

    <h3 data-anchorid="sockets" style="margin-left: 100px;">Connectivity</h3>
    <img src="html5_connectivity.svg" width="90" height="90" alt="[HTML5 Connectivity Logo]" 
class="FloatLeft" />

Answer 3

Если вы знаете точные размеры изображения, это будет работать:

h3.headline {
    padding-left: 90px;
}

img.image {
   position: relative;
   left: 0;
   top: -90px;
   margin-bottom: -90px
}

Чтобы уточнить: это просто использует поток документов по умолчанию и перемещает изображение относительно.Это будет работать только тогда, когда вы точно знаете размеры.В вашей CSS вы должны учитывать отступы и маржу.