将图像显示在彼此下方，并在右侧显示文本答案

【问题标题】：Show images under each other with text at right将图像显示在彼此下方，并在右侧显示文本
【发布时间】：2017-09-02 15:27:11
【问题描述】：

抱歉，这似乎是一个问得过多的问题，但我的问题有点不同，我需要一些帮助。

所以，我得到了 2 张图片：A 和 B。我希望它们显示在彼此下方，并且我需要在图片 A 和 B 的右侧放置文字。

现在，问题是我只能在放置图像 A 和 B 之后放置文本。这是一个示例：

<img src="A.jpg">
<img src="B.jpg">

<p> Text of A, at the right of A </p>
<p> Text of B, at the right of B </p>

由于某些原因，我无法将文字放在图像 A 之后，我不知道如何进行。

感谢您的帮助！

P.S ：我正在寻找一个干净的版本，而不是一个有位置的东西：例如，当用户调整大小时，绝对会弄得一团糟。

【问题讨论】：

为什么不创建两个 div 并在每个 div 中放置一个图像和段落
好吧，因为我使用了一些 javascript，并且我需要文本在同一个脚本中，所以我无法将它们分开。
你最好对你目前正在做的事情做一个sn-p。文本需要在同一个脚本中，很难理解您的意思。

标签： html css flexbox

【解决方案1】：

使用flex

#wrapper img{
    width: 25%;
    height: 200px;
}
div#wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
div#wrapper img:nth-child(1n){
	order: 1;
    flex: 0 0 calc(50% - 10px);
}
div#wrapper img:nth-child(2){
	order: 3;
    flex: 0 0 calc(50% - 10px);
}
div#wrapper p:nth-child(3n){
	order: 2;
    flex: 0 0 calc(50% - 10px);
}
div#wrapper p:nth-child(4n){
	order: 4;
    flex: 0 0 calc(50% - 10px);
}

<div id="wrapper">
    <img src="http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg" alt="">
    <img src="http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg" alt="">
    <p> Text of A, at the right of A </p>
    <p> Text of B, at the right of B </p>
</div>

希望这会有所帮助！

【讨论】：