向右浮动但保持逻辑顺序

Question

我有以下标记，它会生成一个右边有图像的段落。

<p>
  <div style="float: right;">
    <img src="http://placehold.it/100x50"/>
    <div>Caption</div>
  </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Morbi commodo nibh a sem ornare porttitor. 
Maecenas ultrices tristique est in interdum. 
</p>

这会将图像浮动到右侧，但也允许文本环绕图像。

因为我使用响应式设计，我想知道是否有任何方法可以保持以下格式

但是将编码放在＆＃39;逻辑顺序＆＃39;即;

<p>text
<div>
    <img>
    {caption}

Answer 1

你试过吗

text-align: left; 

标题为div？

Answer 2

你不应该在段落中放置像div这样的块元素，这似乎是对figure和figcaption元素的理想用法。

JSfiddle Demo

<强> HTML

<div class="wrapper">

    <p>
        <figure style="float: right;">
            <img src="http://placehold.it/100x50"/>
            <figcaption>Caption</figcaption>
        </figure>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam obcaecati excepturi consequuntur sed quas sapiente eaque hic error culpa enim nulla laudantium optio numquam veritatis dolorem repellendus corporis cum itaque eligendi nam temporibus officiis assumenda. Quas quod quis magni minus nesciunt sequi et labore aspernatur
    </p>
</div>

CSS

.wrapper {
    width:500px;
}

figure {
    float:right;
    border:1px solid grey;
}

figcaption {
    text-align: center;
}