在不更改HTML的情况下重新排列元素的视觉顺序

我有以下html代码：

<p>some text</p>
<img src="#" alt="image" width="200" height="250" />

我想要的是：

_____________
|           | some text
|   image   |
|           |
|___________|

把订单调高

<img src="#" alt="image" width="200" height="250" />
<p>some text</p>

或

保持秩序，让双方都保持平衡：

img, p {
    float: right;
}

---

您可能需要调整包含这两个元素的元素的宽度，因为它将浮动到元素的最右侧。

有一种简单的方法可以使用CSS Flexbox重新排列元素的视觉顺序

对HTML没有任何更改

flex

order

属性用于在flex容器中重新排列元素

#容器{
显示器：flex；
边框：2件纯黑；
背景颜色：浅灰色；
}
p{
顺序：1；
}
img{
利润率：10px；
}

一些文本

为什么不将

放在

之前？由于您希望它呈现在文本之前，因此将其放置在文本之前似乎更有意义。谢谢。有没有办法保持这种秩序？我想你可以保持秩序，然后正确浮动。然后可能需要调整包含元素。

img, p {
    float: left;
}

img, p {
    float: right;
}