在css中相对于图像定位段落

Question

aside {
    float: left;
    width: 30%;
    display: block;
}

#img1,
#img2,
#img3,
#img4 {
    padding-top: 20px;
}

#pRight {
    float: right;
    width: 66%;
}

#pRight2 {
    padding-top: 100px;
    float: right;
    width: 66%;
}

#pRight3 {
    padding-top: 80px;
    float: right;
    width: 66%;
}

#pRight4 {
    padding-top: 140px;
    float: right;
    width: 66%;
}

 <aside>
        <img id="img1" src="Images/fotohome1.jpg" alt="" width="100%" height="100%">
        <img id="img2" src="Images/fotohome2.jpg" alt="" width="100%" height="100%">
        <img id="img3" src="Images/fotohome3.jpg" alt="" width="100%" height="100%">
        <img id="img4" src="Images/fotohome4.jpg" alt="" width="100%" height="100%">
</aside>

    <p id="pRight">Het chirojaar begint in september met onze traditiegetrouwe startdag en eindigt met een spetterend bivak. Wij hebben een gemotiveerde leidingsploeg die zich op vrijwillige basis een heel jaar lang inzet. Chiro betekent voor de leiding veel meer dan zondagnamiddag alleen. Wij organiseren immers ook een fuif, een spaghettiavond, een kamp en nog veel meer. Door dit te organiseren, zorgen wij voor extra geld in het laatje. Daarmee kopen wij materiaal, vieruurtjes e.d. en dit komt onze chirowerking ten goede. </p>

    <p id="pRight2">Het chirokamp zit er weer op. Het was een spetterend kamp en iedereen heeft er van genoten! De leiding van Chiro Betekom wil graag iedereen bedanken voor dit fantastische kamp. Dit jaar hadden we een nieuwe kookploeg en die hebben heel lekker eten voor ons gemaakt. Een welverdiende dankjewel aan heel de kookploeg! Natuurlijk is er ook geen kamp zonder onze leuke leden! Wij hebben ons super geamuseerd met jullie! Chiro Betekom is een toffe bende! Wij kunnen alvast niet meer wachten tot het nieuwe chirojaar begint. Hopelijk bent u er ook bij!</p>

    <p id="pRight3">De hoofdleiding leidt elke zondag de chiro. Zij zorgen voor een goede sfeer binnen het leidingsteam. Als u nog verdere algemene vragen hebt, dan kan u zeker bij hen terecht!</p>
    
    <p id="pRight4">Onze kidsparty gaat door op dezelfde dag als de grote fuif, ze start om 16u en duurt tot 19u.
Alle kindjes (en natuurlijk ook de ouders) zijn welkom om te komen dansen op de populairste beats van het moment. Er zal ook een schminkstand zijn!</p>

我正在尝试定位 4 个图像和 4 个段落，以便段落始终位于图像旁边，即使在调整屏幕大小以使其更小时也是如此。为了说明我的意思，你可能想看看这张照片：

当我缩小屏幕时，段落随机出现在屏幕上，我想定位它们，以便它们始终分别位于每个图像的旁边，我该怎么做？

Answer 1

第一个解决方案

更少的代码。改进的语义。

小提琴

https://jsfiddle.net/me9nkq1q/

这里有一个好处：您的文本会垂直对齐，如果您的文本长度因段落而异，它看起来不错。

标记

<article>
    <img src="http://placehold.it/150x150" alt="image content description" />
    <p>Lorem ipsum dolor</p>
</article>
<article>
    <img src="http://placehold.it/150x150" alt="image content description" />
    <p>Lorem ipsum dolor sit amet</p>
</article>

CSS

article {
    display: table;
}

img, p {
    padding: 10px;
    display: table-cell;
    vertical-align: middle;
}

从这里开始，您应该可以轻松地根据我们的需要进行调整。

响应式解决方案

小提琴

https://jsfiddle.net/6uzoe6tw/

标记

<article>
    <div>
        <img src="http://placehold.it/150x150" />
    </div>
    <p>Het chirojaar begint in september met onze traditiegetrouwe startdag en eindigt met een spetterend bivak. Wij hebben een gemotiveerde leidingsploeg die zich op vrijwillige basis een heel jaar lang inzet. Chiro betekent voor de leiding veel meer dan zondagnamiddag alleen. Wij organiseren immers ook een fuif, een spaghettiavond, een kamp en nog veel meer. Door dit te organiseren, zorgen wij voor extra geld in het laatje. Daarmee kopen wij materiaal, vieruurtjes e.d. en dit komt onze chirowerking ten goede.</p>
</article>
<article>
    <div>
        <img src="http://placehold.it/150x150" />
    </div>
    <p>De hoofdleiding leidt elke zondag de chiro. Zij zorgen voor een goede sfeer binnen het leidingsteam. Als u nog verdere algemene vragen hebt, dan kan u zeker bij hen terecht!</p>
</article>

CSS

article {
    display:table;
}

div, p {
    padding:10px;
    display:table-cell;
    vertical-align:middle;
}

div {
    width:30%;
}

p {
    width:70%
}

img {
    height: auto;
    width:100%;
}

Answer 2

试试这个https://jsfiddle.net/2Lzo9vfc/129/

HTML

<div class="block">
  <img src="http://placehold.it/150x50" alt="">
  <p class="text">Lorem Ipsum</p>
</div>
<div class="block">
  <img src="http://placehold.it/150x50" alt="">
  <p class="text">Lorem Ipsum</p>
</div>
<div class="block">
  <img src="http://placehold.it/150x50" alt="">
  <p class="text">Lorem Ipsum</p>
</div>
<div class="block">
  <img src="http://placehold.it/150x50" alt="">
  <p class="text">Lorem Ipsum</p>
</div>

CSS

.block img {
    float: left;
    display: inline-block;
    margin-right: 50px;
}

.text {
    padding: 14px 30px;
    border: 1px solid black;   
    display: inline-block;
}

编辑解决方案 2 https://jsfiddle.net/2Lzo9vfc/130/

CSS

.block img {
    margin-right: 50px;
    display: table-cell;
}

.content {
    display: table;
}

.block {
    display: table-row;
}

.text {
    padding: 14px 30px;
    border: 1px solid black;
    display: table-cell;
}