Question

无法克服这个问题。我设计了一个小容器：

里面的文字内容是绝对的。我试图通过css no js ...

来使文本容器高度响应

我非常感谢任何帮助：）

小矩形是..

.left-area {
  display: inline-block;
  background-color: rgb(73, 50, 76);
  width: 144px;
  height: 29px;
  margin-top: 109px;
  margin-left: 0px;
  position: absolute;
}

描述是..

.app-desc {
      position: absolute;
      display: inline-block;
      width: 78%;
      padding: 17px 10px 10px 30px;
      border-radius: 5px;
      color: #ffffff;
      font-size: medium;
    }

这里是正确的区域..

.right-area {
  display: inline-block;
  background-color: rgb(73, 50, 76);
  width: 88%;
  height: 128px;
  margin-top: 10px;
  border-radius: 10px 10px 10px 0px;
}

每个元素都需要保持原状......例如收视率......

.app-rating {
  position: absolute;
  display: inline-block;
  margin-left: -10%;
  bottom: 0;
  text-align: center;
  width: 100%;
}

Answer 1

文本块容器上的position: absolute;是相对于父容器的定位，但它会覆盖display: inline-block规则，因此父级不会考虑子大小属性，因为它是有效地独自行动。如果绝对被移除，父容器固定高度也将阻止元素增加容器高度。

尝试以下方法：

删除.app-desc容器
删除父.right-area容器上的固定高度并添加height: 100%;以确保父容器对子块元素做出反应
然后向min-height:添加.right-area，以便在孩子的内容不足时容器不会缩短

请参阅我尝试复制您的方案的示例：jsfiddle（我不知道在哪里放置图标/按钮以便他们可能需要进行一些调整）

希望这会有所帮助，如果你想知道如何将绝对定位给相对父母以及他们如何对块元素做出反应那么W3 School site - Position Section

就有大量的文档和示例

相对（父）内容下的自动高度文本内容

1 个答案: