Следующая разметка использует элемент figure для отображения изображения, встроенного в текст абзаца - следовательно, рисунок «включен» внутри первого
.
<div class="object-content">
<p>
<figure class="object-inline-figure">
<img
class="object-inline-figure-image"
height="200"
src="/site_media/media/files/images/WH-487_opt.jpeg"
width="300">
<figcaption class="object-inline-figcaption">
<p class="object-inline-figcaption-caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="credits">
<span>Credit: </span>
<span class="object-inline-figcaption-caption-user-credit">
<a href="/profiles/Grey-Smith-Leigh/">Leigh Grey-Smith</a></span>,
<span class="object-inline-figcaption-caption-custom-credit">Lady Grey</span>
</p>
</figcaption>
</figure>
The relationships between functional drivers and symbolic power,
landscape and architecture, site and context, quality of materials
and quality of experience are all well considered. This high quality
design resolution can, in part, be attributed to the relationship
between designer and client.</p>
</div>
Однако это кажется проблематичным, по крайней мере, в Chrome и Firefox, то есть при использовании 'inspect element' (в Chrome),
и
текст / разметка имеют вид:
<p></p>
<figure>
#...
</figure>
The relationships between functional drivers and symbolic power,
landscape and architecture, site and context, quality of materials
and quality of experience are all well considered. This high quality
design resolution can, in part, be attributed to the relationship
between designer and client.
<p></p>
Который фактически "осиротел" текст "Отношения между ..." вне его
разметки, теряя свой стиль и семантическое значение ... по крайней мере, для человека, просматривающего веб-сайт page.
Перемещение
за пределы
, похоже, дает более предсказуемые результаты, например:
<figure>
#...
</figure>
<p>The relationships between functional drivers and symbolic power,
landscape and architecture, site and context, quality of materials
and quality of experience are all well considered. This high quality
design resolution can, in part, be attributed to the relationship
between designer and client.
</p>
Но мы теряем эффект «переноса текста», когда
- это text-align
ed left or right.
(предыдущий пример)?