html - 响应问题的困难

Question

我正在尝试用 css 制作一个以图例为中心的字段集!我有两个问题，第一个是框大小根据其内容而变化，但我想保持所有字段集的大小相同，无论内容是否更大是否来自他人。如何实现这一目标？

第二个问题是:我试图在图例的上部添加一个 handle ，使其看起来像一个公文包。这对普通皮肤很有效，但在较小的皮肤中，该 handle 从原点移开。如何解决这个问题，使 handle 变得灵敏并且不会在较小的皮肤中移位？
这是 DEMO的问题。

句柄:

.handle {
  position: absolute;
  top: -28px;
  left: 50%;
  border: 12px solid rgba(77, 53, 33, 1);
  border-bottom: 0 none;
  width: 48px;
  height: 28px;
  margin-left: -30px;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}

Answer 1

这将解决您的句柄问题。

.handle {
  top: -45px;
}

@media screen and (min-width: 768px) {
  .handle {
    top: -28px;
   }
}

这将解决您的高度问题。

@media screen and (min-width: 768px) {
  .inner-child {
    min-height: 300px;
  }
}