Question

我有一个盒子，右侧有图像，左侧有文字。盒子应该有白色背景。在较小的屏幕上，文字低于图像，这是好的。

在盒子底部上方几个px我想要一个按钮。我想我应该通过使用盒子的相对位置和按钮的绝对位置来实现。

CSS和HTML代码是

.box {
  background: white;
  float: right;
  position: relative
}

.space {
  padding: 15px;
}

.button {
  vertical-align: middle;
  position: absolute;
  bottom: 40px;
  margin-left: 15px;
}

<div class="box">
  <img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">
  <h2 class="space">Amsterdam</h2>
  <p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>
  <a class="button" href="https://www.buienradar.nl">Slecht weer</a>
  <hr>
</div>

问题是在较小的屏幕上，文本显示在按钮上。另一个问题是文本的填充不会阻止它连接到图像（笔记本电脑/台式机）。我不想在图片中添加margin-left，因为我希望将行<hr>连接到图像。

Answer 1

按钮位于文本上方，因为您已使用position:absolute按钮。

使用媒体查询规则在较小的屏幕中设置position:relative和bottom:auto ...

在vertical-align: middle;定位元素中使用absolute也无效......最好将其删除

Stack Snippet

＆＃13;

.box {
  background: white;
  float: right;
  position: relative
}

.space {
  padding: 15px;
}

img {
  max-width: 100%;
}

.button {
  position: absolute;
  bottom: 40px;
  margin-left: 15px;
}

@media (max-width:768px) {
  .button {
    position: relative;
    bottom: auto;
    margin-left: 15px;
  }
}

＆＃13;

<div class="box">
  <img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">
  <h2 class="space">Amsterdam</h2>
  <p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>
  <a class="button" href="https://www.buienradar.nl">Slecht weer</a>
  <hr>
</div>

＆＃13;

如何防止文本超过按钮

1 个答案: