主页 / 问题 / 760496
Accepted
Skywave
Asked:2020-12-19 21:13:57 +0000 UTC2020-12-19 21:13:57 +0000 UTC

块外文本

  • 772

下午好。

有一个带背景的块。该块包含文本。块大小根据内容扩展。

https://jsfiddle.net/skywave/6zfcb7st/

有必要在不使用JS它的情况下使文本稍微超出块。但同时，使块继续从内容中延伸出来，并将文本锚定到块的顶部。

https://jsfiddle.net/skywave/umqop1qs/（但在这里不起作用）

谢谢你。

PS我试过了margin-bottom: -100px;。没有帮助。

html

2 个回答

  1. Best Answer

    您可以使用负边距底部。您只需要将父级设置为 padding-bottom 或 border-bottom，至少 1px。

    好吧，父级有一个正边距底部来排斥它后面的所有东西，否则其他元素会碰到它。

    .outer {
  background: #000;
  margin-bottom: 50px;
  padding-bottom: 1px;
}

.container {
  margin-bottom: -50px;
}

p {
  color: #999;
}
    <div class="outer">
  <div class="container">
    <p>Текст</p>
    <p>Текст</p>
    <p>Текст</p>
    <p>Текст</p>
    <p>Текст</p>
  </div>
</div>

    • 1 

  2. .outer {
  height: 200px;
  background: #000;
  position: relative;
}

.container {
  position: absolute;
  bottom: -1.5em;
}

p {
  color: #999;
}
    <div class="outer">
  <div class="container">
    <p>Текст</p>
    <p>Текст</p>
    <p>Текст</p>
    <p>Текст</p>
    <p>Текст</p>
  </div>
</div>

    • 0

相关问题