在一个字段组中拥有两个<传奇>。

Question

我试图在一个字段集内有两个图例。第一个图例是田字格中心的图像，另一个图例应该是田字格右边的图像。下面是我的代码，第一个图例工作得很好，但我不知道如何制作第二个图例，如下图所示。

<fieldset style="width: 500px;">
    <legend style="display: block; margin: 0 auto;">
      <img style="height: 200px;" src="https://i.imgur.com/3RyXECr.jpg">
    </legend>

    <legend style="display: block;">
      <img style="height: 20px;" src="https://i.imgur.com/dOhyP62.png">
    </legend>

</fieldset>

Answer 1

你不需要，你只允许有一个...只要把图像与父图像的位置绝对分开就可以了。不加掩饰 legend

fieldset {
  position: relative;
  border:1px solid grey;
}

.close {
  position: absolute;
  right:0;
  top:100px; /* half height of legend image */
  transform:translate(50%, -50%);
  background:white;
  box-shadow: 0 0 0 4px white;
}

<fieldset style="width: 400px;">
    <legend style="display: block; margin: 0 auto;">
      <img style="height: 200px;" src="https://i.imgur.com/3RyXECr.jpg">
    </legend>
      <img style="height: 20px;" src="https://i.imgur.com/dOhyP62.png" class="close">

</fieldset>