我下载了一些书籍和杂志的封面，想在我写的一些电影的空白处使用它们。我希望与每节经文相关的封面与其左侧或右侧对齐，除非需要移动以避免重叠，即使在旧浏览器上也是如此。另外，我希望文档能够响应窗口大小的变化。解决方法是插入
<br>我或许可以将图像放在垂直堆叠的标签中，但那样我就无法将所选图像与适当的文本行对齐。我想学习一些更现代的东西，但我看到警告说所有浏览器都不支持 flexbox。特别是，我担心一个非常旧的 Firefox。
我希望图像垂直对齐而不会重叠。
h1 {
font-size:4em
text-align-center;
}
.text {
position:absolute;
left:20%;
width:60%;
}
.verse {
text-align: center;
font-size: 2em;
width: 60%
}
img.l {
float: left;
width: 12%;
position: absolute;
left: -20%;
}
img.r {
float: right;
width: 12%;
position: absolute;
right: 20%;
}<div class=text>
<H1>My favorite things</H1>
<p>
[Verse]
</p>
<img class=L src="https://upload.wikimedia.org/wikipedia/en/d/db/Silmarillion.png" alt="The Silmarillion">
<img class=R src="https://upload.wikimedia.org/wikipedia/en/8/8e/The_Fellowship_of_the_Ring_cover.gif" alt="The Fellowship of the Ring">
<p class="verse">
<a href="https://en.wikipedia.org/wiki/Ungoliant">Gardening spiders</a>
<br> And <a href="https://en.wikipedia.org/wiki/Middle-earth_weapons_and_armour#Narsil">swords that are broken</a>
<br> Words in the <a href="https://en.wikipedia.org/wiki/Black_Speech">Black Speech</a>
<br> That must not be spoken
<br>
<img class=L src="https://upload.wikimedia.org/wikipedia/en/1/11/The_Return_of_the_King_cover.gif" alt="The Return of the King">
<a href="https://en.wikipedia.org/wiki/Denethor">Unfaithful stewards</a>
<br> Who don't want their kings
<br> These are a few of my favorite things.
</p>
<br>
<p>
[hook]
</p>
<p class="verse">
<img class=L src="https://upload.wikimedia.org/wikipedia/en/f/f0/Currents_of_space.jpg" alt="The Currents of Space"> When the <a href="https://en.wikipedia.org/wiki/Orc">orc</a> bites, when the <a href="https://en.wikipedia.org/wiki/The_Currents_of_Space">probe</a> stings
<br> When I'm feeling bad
<br> I simply remember my favorite <a href="https://en.wikipedia.org/wiki/Aragorn">kings</a>
<br> And I don't feel so bad.
</p>
<p>
[Verse]
<img class=L src="http://www.philsp.com/visco/Magazines/ASF/ASF_0224.jpg" alt="Astounding Science Fiction vol. XLIII, no. 5, July 1949">
<img class=R src="https://upload.wikimedia.org/wikipedia/en/3/38/Agent_of_vega.jpg" Alt="<i>Agent of Vega</i> front cover">
</p>
<p class="verse">
Pedllers who drive their
<br> Mysteriuos wagons
<br> Pretty young ladies
<br> Who can speak to dragons
<br>
<img class=L src="https://www.isfdb.org/wiki/images/4/45/ANLGOCT67.jpg" Alt="<i>Analog vol. 80,no 2, October 1967">
<img class=R src="https://upload.wikimedia.org/wikipedia/en/7/75/AnneMcCaffrey_Dragonflight.jpg" Alt="<i>Dragonflight</i> front cover">
<!--
http://www.philsp.com/visco/Magazines/ASF/ASF_0445.jpg
Analog vol. LXXX, no. 4, December 1967
Dragonrider part 1
-->
Travelling the Cosmos
<br> In a
<a href="https://en.wikipedia.org/wiki/The_Ship_Who_Sang">ship who sings</a>
<br> These are a few of my favorite things.
</p>
<br>
<img class=L src="https://upload.wikimedia.org/wikipedia/en/6/60/ShipWhoSang.jpg" alt="<i>The Ship Who Sang</i> front cover">
<p>
[Verse]
</p>
<p class="verse">
<img class=L src="https://www.isfdb.org/wiki/images/b/b1/FSFMar1959.jpg" alt="The Magazine of Fantasy & Science Fiction, March 1959">
<a href="https://en.wikipedia.org/wiki/All_You_Zombies">
Time traveling bar men
</a>
<br> Who are like no others
<br> Who are their own fathers
<br> And are their own mothers
<br>
<img class=R src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Heinlein-face.jpg" alt="Robert Anson Heinlein, Grand Master of SF"> Of all such stories
<br> Know <a href="https://en.wikipedia.org/wiki/Robert_A._Heinlein">Heinlein's</a> are kings
<br> These are a few of my favorite things.
</p>
<br>
<p>
[Verse]
</p>
<p class="verse">
<img class=L src="https://isfdb.org/wiki/images/1/10/LRDDRCRWLR2002.jpg" alt="Lord Darcy"> A <a href="https://en.wikipedia.org/wiki/Lord_Darcy_(character)">ducal detective</a> whose
<br> Aide does the magic
<br> finds that their cases
<br> are often quite tragic
<br> I hope more stories
<br> still lurk in the wings
<br> These are a few of my favorite things.
</p>
</div>这是一个适用于任何现代浏览器的解决方案（阅读：最近 8 年发布）。它是嵌套在外包装中的基本 flex 行结构。文本和图像包装器的顺序决定了它们的显示顺序。如果您不想让标记顺序与显示顺序相匹配，可以使用 flex ordering 代替。您可能需要使用媒体查询或可变单位（vw、rem）来减小较小屏幕上的图像大小，以增强响应行为。
出于演示目的，我添加了一些颜色。请原谅我对您内容的屠杀。为了方便，我抓了一些。
.music-box {
background: #eee;
margin-bottom: 15px;
}
.music-box-section {
display: flex;
gap: 15px;
background: pink;
}
.music-box-image {
flex-basis: 12%;
}
.music-box-text {
flex: auto;
}<h1>My Favorite Things</h1>
<div class="music-box">
<a href="https://en.wikipedia.org/wiki/Ungoliant">Gardening spiders</a><br> And <a href="https://en.wikipedia.org/wiki/Middle-earth_weapons_and_armour#Narsil">swords that are broken</a><br> Words in the <a href="https://en.wikipedia.org/wiki/Black_Speech">Black Speech</a><br> That must not be spoken
<div class="music-box-section">
<div class="music-box-image">
<img class=L src="https://upload.wikimedia.org/wikipedia/en/f/f0/Currents_of_space.jpg" alt="The Currents of Space">
</div>
<div class="music-box-text">
When the <a href="https://en.wikipedia.org/wiki/Orc">orc</a> bites, when the <a href="https://en.wikipedia.org/wiki/The_Currents_of_Space">probe</a> stings<br> Who don't want their kings<br> These are a few of my favorite things.
</div>
</div>
<a href="https://en.wikipedia.org/wiki/All_You_Zombies">
Time traveling bar men
</a>
<br> Who are like no others
<br> Who are their own fathers
<br> And are their own mothers
</div>
<div class="music-box">
<a href="https://en.wikipedia.org/wiki/Ungoliant">Gardening spiders</a><br> And <a href="https://en.wikipedia.org/wiki/Middle-earth_weapons_and_armour#Narsil">swords that are broken</a><br> Words in the <a href="https://en.wikipedia.org/wiki/Black_Speech">Black Speech</a><br> That must not be spoken
<div class="music-box-section">
<div class="music-box-text">
When the <a href="https://en.wikipedia.org/wiki/Orc">orc</a> bites, when the <a href="https://en.wikipedia.org/wiki/The_Currents_of_Space">probe</a> stings<br> Who don't want their kings<br> These are a few of my favorite things.
</div>
<div class="music-box-image">
<img class=L src="https://upload.wikimedia.org/wikipedia/en/f/f0/Currents_of_space.jpg" alt="The Currents of Space">
</div>
</div>
<a href="https://en.wikipedia.org/wiki/All_You_Zombies">
Time traveling bar men
</a>
<br> Who are like no others
<br> Who are their own fathers
<br> And are their own mothers
</div>