У меня есть процедура, состоящая из шагов. Некоторые шаги сопровождаются изображением.
<p class="imagefloatright"><img src="step 1.png"/></p>
<ol>
<li>
<p>Step 1</p>
<p class="imagefloatright"><img src="step 2.png"/></p>
</li>
<li>
<p>Step 2</p>
<p>Step 3</p>
</li>
</ol>
и мой CSS:
p.imagefloatright img {
float: right;
clear: both;
}
Это выход по умолчанию. Изображения не остаются с шагами, к которым они принадлежат, текст для шага 2 помещается рядом с изображением 1:
Я хочу, чтобы изображение, относящееся к шагу 2, было выровнено по вертикали с шагом 2:
Раньше я добился желаемого результата в XSL-FO, вставив блок полноразмерной высоты с высотой = 0 перед каждым плавающим изображением.
Могу ли я достичь желаемого макета с помощью команд CSS? Или мне нужно вставить блок в HTML, прежде чем применять CSS к HTML?