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

Question

我有以下HTML代码：

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

我想将图片拉到图片右侧。

我无法在任何地方找到如何使用常规CSS执行此操作而不更改html代码的顺序。

我尝试在图片上使用float:left，但这只会影响图片后的html元素。

什么是正确的方法？

更清楚的是，现在我得到了这个：

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

我想要的是：

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

Answer 1

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

无法更改HTML。

flex order属性旨在重新排列Flex容器中的元素。

＆＃13;

＆＃13;

#container {
  display: flex;
  border: 2px solid black;
  background-color: lightgray;
}
p {
  order: 1;
}
img {
  margin: 10px;
}

＆＃13;

<div id="container">
  <p>some text</p>
  <img src="http://i.imgur.com/60PVLis.png" alt="image" width="75" height="75">
</div>

＆＃13;

＆＃13;

＆＃13;

在上面的示例中，flex容器的子元素（#container）排成一行，这是默认设置（flex-direction: row）。

order属性的默认值为0，这意味着元素将按照它们在源中出现的顺序对齐。

通过向p提供order: 1，它会跳过具有order: 0的元素。

或者，我们可以为图片添加order: -1，将其放在文本之前。

详细了解order属性here。

Answer 2

切换订单

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

然后浮动img和p left

img, p {
    float: left;
}

OR

保持订单并向右浮动：

img, p {
    float: right;
}

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