css 如何将侧栏中的图像与中间栏中的文本对齐而不重叠？

4sup72z8 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(132)

I下载了一些书籍和杂志的封面，想把它们用在我写的一些filk的页边空白处。我想让诗句居中，左页边空白和右页边空白足够大，以包含与每一节相关的封面，对齐到它的左边或右边，除非它需要移动以避免重叠，即使在旧的浏览器上。我有单独的IMG类用于左页边空白和右页边空白。另外，我希望文档能够对窗口大小的变化做出响应。解决方法是插入<br>标签以强制F&SF封面向下足够的量以避免重叠。

我可能会把图片放在一个垂直堆叠的标签里，但是这样我就不能把选中的图片和合适的文本行对齐了。我想学习一些更现代的东西，但是我看到了一些警告，说不是所有的浏览器都支持flexbox。特别是，我担心的是一个非常老的Firefox。
我尝试改变左侧图像的位置，类L。使用RELATIVE，一些图像缩小并显示在其他图像的右侧。使用FIXED，图像完全消失。
我希望图像垂直对齐，没有重叠。

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>

css

来源：https://stackoverflow.com/questions/75665227/how-can-i-align-images-in-side-columns-to-text-in-the-middle-column-without-over

1条答案

按热度按时间

omhiaaxx1#

这有点像是一个黑客，因为它仍然需要一些手动调整，但总比摆弄如果我把标签块化并把它们 Package 在一个内联容器中，那么我就可以得到我想要的外观。
顺便说一句，我简要地看了一下flexbox和grid;我没有看到一个明显的方式来使用它们的目的。你能澄清吗？谢谢。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <TITLE>favorite things</TITLE>
        <META name="KEYWORDS" CONTENT="filk">
        <style>
            .verse {text-align: center; font-size: 2em; width:60%}
            div.l,span.l {
                     display:inline;
                     float:left;
                     width:15%;
                     position:absolute;
                     left:-20%;
                   }
            div.r,span.r {
                     display:inline;
                     float:right;
                     width:15%;
                     position:absolute;
                     right:20%;
                   }
            img.l  {
                     float:left;
                     width:999px;
                     max-width:15%;
                     position:absolute
                     left:-20%;
                   }
            img.r  {
                     float:right;
                     width:15%;
                     position:absolute;
                     right:20%;
                   }
            img.v  {
                     display:block;
                     margin:10% 10% 10% 10%;
                     width:100%;
                   }
        </style>
</head>
<BODY LANG="en-US" DIR="LTR">
<div style="position:absolute; left:20%; width:60%;">
<H1 align=center style="font-size:4em;">My favorite things</H1>

<p>
[Verse]
</p>
<div class=L>
<img class=V src="https://upload.wikimedia.org/wikipedia/en/d/db/Silmarillion.png"
             alt="The Silmarillion">
<img class=V src="https://upload.wikimedia.org/wikipedia/en/1/11/The_Return_of_the_King_cover.gif"
             alt="The Return of the King">
<img class=V src="https://upload.wikimedia.org/wikipedia/en/f/f0/Currents_of_space.jpg"
             alt="The Currents of Space">
</div>
<div class=R>
<img class=V src="https://upload.wikimedia.org/wikipedia/en/8/8e/The_Fellowship_of_the_Ring_cover.gif"
             alt="The Fellowship of the Ring">
</div>
<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>
<a href="https://en.wikipedia.org/wiki/Denethor">Unfaithful stewards</a>
<br>
Who don't want their kings
<br>
These are a few of
<br>
My favorite things.
</p>
<br>
<p>
[hook]
</p>
<p class="verse">
When the <a href="https://en.wikipedia.org/wiki/Orc">orc</a> bites,
<br>
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
<br>
My favorite <a href="https://en.wikipedia.org/wiki/Aragorn">kings</a>
<br>
And I don't feel so bad.
</p>
<p>
[Verse]
</p>
<div class=L>
<img class=V src="http://www.philsp.com/visco/Magazines/ASF/ASF_0224.jpg"
             alt="Astounding Science Fiction vol. XLIII, no. 5, July 1949">
<img class=V src="https://www.isfdb.org/wiki/images/4/45/ANLGOCT67.jpg"
             Alt="<i>Analog vol. 80,no 2, October 1967">
<img class=V src="https://upload.wikimedia.org/wikipedia/en/6/60/ShipWhoSang.jpg"
             alt="<i>The Ship Who Sang</i> front cover">
<img class=V src="https://www.isfdb.org/wiki/images/b/b1/FSFMar1959.jpg"
             alt="The Magazine of Fantasy & Science Fiction, March 1959">
<img class=V src="https://isfdb.org/wiki/images/1/10/LRDDRCRWLR2002.jpg"
             alt="Lord Darcy">
</div>
<div class=R>
<img class=V src="https://upload.wikimedia.org/wikipedia/en/3/38/Agent_of_vega.jpg"
             Alt="<i>Agent of Vega</i> front cover">
<img class=V 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
             -->
</div>
<p class="verse">
Peddlers who drive their
<br>
Mysteriuos wagons
<br>
Pretty young ladies
<br>
Who can speak to dragons
<br>
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
<br>
My favorite things.
</p>
<br>
<p>
[Verse]
</p>
<p class="verse">
<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>
<span class=R>
<img class=V src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Heinlein-face.jpg"
             alt="Robert Anson Heinlein, Grand Master of SF">
</span>
Of all such stories
<br>
Know <a href="https://en.wikipedia.org/wiki/Robert_A._Heinlein">Heinlein's</a> are kings
<br>
</p>
<br>
<p>
[Verse]
</p>
<p class="verse">
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
<br>
My favorite things.
</p>
</div>
</BODY>
</HTML>

赞(0）回复(0）举报 2023-03-20

我来回答

css 如何将侧栏中的图像与中间栏中的文本对齐而不重叠？

1条答案

相关问题

热门标签

最新问答