在字段集中有两个 <legend>

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>

在字段集中有两个 <legend>

Having two <legend> in a fieldset

html

css

css-position