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：我正在寻找一个干净的版本，而不是一个有位置的东西：例如，当用户调整大小时，绝对会造成大混乱。

Answer 1

使用flex

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

希望这有帮助！

使用右侧文本在彼此下方显示图像

1 个答案: