在网上找到了Div风格虽然无法弄清楚如何在Div中放置文本

Question

我发现了一个很好的响应式矩形Div在线，具有以下样式属性：

AttachDateChangeHandler(): void {
    $('#datepicker').datepicker().on('changeDate', (e)=> {
        this.currentDate = e.date.***()
    })
}

虽然我希望在Div中放置文字，但有自己的风格和链接......

.flex-rectangle{
    margin-left:16%;
    margin-right:16%;
    max-width:728px; 
    width:100%; 
    max-height:90px; 
    height:auto;
    background: #999;
}
.flex-rectangle:before{
    content: "";
    display: block;
    padding-top: 25%;
}

然而出于某种原因，Div内部的任何东西似乎都显示在下方而不是顶部？知道如何解决这个问题吗？

Answer 1

您不能在div中放置文本并在pdeudo-element上添加填充。填充是驱动div大小的原因。

您需要将文本绝对放在div的顶部。

.flex-rectangle {
  margin: auto;
  max-width: 728px;
  width: 100%;
  max-height: 90px;
  height: auto;
  background: #999;
  position: relative;
}

.flex-rectangle:before {
  content: "";
  display: block;
  padding-top: 25%;
}

.inner {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  
  /* not required - just for demo */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color:white;
  
}

<div class="flex-rectangle">
  <div class="inner">
    <a href="#1">Link</a>
    <span>Some Other text</span>
  </div>  
</div>