仅使用CSS将IMG元素移动到文档开头

我有很多这样的post文档：

<p>...</p>
<img/>
<p>...</p>
<p>...</p>
<img/>
<img/>
<p>...</p>
<p>...</p>
<img/>
<p>...</p>
<p>...</p>
<img/>

我试图通过CSS收集如下IMG元素：

<img/>
<img/>
<img/>
<img/>
<img/>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>

浮动：左侧仅将IMGs移动到上一个p元素的开头。 如果没有JS，有没有任何方法可以像CSS那样通过编程收集IMG元素？还是以另一种方式将P元素移动到文档末尾

---

Position:absolute是一种资源解决方案，但我会降低图像高度，使图像链看起来像一个系列。

如果没有javascript，就不可能更改文档的层次结构

---

您可以使用position:relative；，更改所有位置；，但是这需要大量的工作，不能通用。

如果没有javascript，就不可能更改文档的层次结构

您可以使用position:relative；，更改所有位置；，但这需要大量的工作，不能通用。

是的，有可能：

对于下面的段落，我们必须为容器提供所有元素的页边顶部高度，这里我使用了父体

同样，这是有效的。但对性能不利

是的，有可能：

对于下面的段落，我们必须为容器提供所有元素的页边顶部高度，这里我使用了父体

同样，这是有效的。但对性能不利

---

只要您的图像与您的段落是同级的，您就可以使用Flexbox来实现这一点

---

然而，这在任何早于IE10的IE中都不起作用

只要您的图像与段落是同级的，您就可以使用Flexbox来实现这一点

---

然而，这在任何早于IE10的IE中都不起作用

除了position:absolute，它不允许将它们放在彼此下面，不是真的-你可能需要使用JavaScript来实现这一点。你可以改变物理定律，队长！我不是想改变它的真实顺序，我只是想改变它的外观。这就是CSS存在的原因吗？除了position:absolute，它不允许将它们放在彼此下面，不是真的-你可能需要使用JavaScript来实现这一点。你可以改变物理定律！我不是想改变它的真实顺序，我只是想改变它的外观。这就是CSS存在的原因吗？如果有4或6个图像呢？我需要它作为液体。谢谢你的回答！只有在存在大量图像的情况下，这些才有效。如图6和图4所示。。您需要javascript来调整页边空白顶部，但是如果您需要它是fluidAlso，请记住css用于视觉，js用于行为。所以检测测量值不是css所能做到的。那么，如果有4或6张图像呢？我需要它作为液体。谢谢你的回答！只有在存在大量图像的情况下，这些才有效。如图6和图4所示。。您需要javascript来调整页边空白顶部，但是如果您需要它是fluidAlso，请记住css用于视觉，js用于行为。所以检测测量值不是css所能做到的。哇！！非常感谢。我不知道！我想我们大多数人也是！哇！非常感谢。我不知道！我想我们大多数人也是！

img {
    position:absolute;

    height: 100px;
    width: 100px;
    background: blue;
}
p { background: grey; }

img:nth-of-type(1){
    top: 0;
    left: 0;
}
img:nth-of-type(2){
    top: 110px;
    left: 0;
}
img:nth-of-type(3){
    top: 220px;
    left: 0;
}
img:nth-of-type(4){
    top: 330px;
    left: 0;
}
img:nth-of-type(5){
    top: 440px;
    left: 0;
}

body {
    margin-top: 550px;

}

.container {
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.container p {
  -moz-box-ordinal-group: 2;
  -webkit-flex-order: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}