在 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/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;
}

Answer 2

第一个解决方案

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

Fiddle

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

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

响应式解决方案

Fiddle

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%;
}

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

Position paragraph relative to image in css

css

image

paragraph

第一个解决方案

Fiddle

标记

CSS

响应式解决方案

Fiddle

标记

CSS