html - 在彼此下方显示图像，并在右侧显示文字

Question

很抱歉，如果这似乎是一个被问过头的问题，但我的问题有点不同，我需要一些帮助。

所以，我有 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:我正在寻找一个干净的版本，而不是带有 position:absolute 的东西，例如当用户调整大小时会造成很大的困惑。

Answer 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>

希望这对您有所帮助!