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

Question

我有以下 html 代码：

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

我想把文字拉到图片的右边。

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

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

什么是正确的方法？

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

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

我要的是这个：

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

Answer 1

调高顺序

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

然后将 img 和 p 都向左浮动

img, p {
    float: left;
}

或

保持顺序并向右浮动：

img, p {
    float: right;
}

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

Answer 2

有一种简单的方法可以使用 CSS Flexbox.

重新排列元素的视觉顺序

HTML没有变化。

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

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

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

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

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

通过给 p 一个 order: 1，它会跳到带有 order: 0 的元素之前。

或者，我们可以给图像一个 order: -1，将其放在文本之前。

详细了解 order 属性 here。

Re-arrange the visual order of elements without changing the HTML