时间戳

首页 > 解决方案 > 移动元素到其容器的底部

html - 移动元素到其容器的底部

问题描述

我正在尝试将 svg 移动到像这样与标题背景的底部齐平（这是来自我的 Figma 设计），但到目前为止，我无法用 svg 覆盖背景的底部。

包含 svg 的 div 位于其容器的最底部，因此它只是需要移动的路径元素

到目前为止，我已经尝试将格式设置为 svg usingdiv.formatSvg > svg { margin-top: auto; }并且我知道我可以将 svg 的位置设置为 relative 并将其移动到位，top: Npx;但这会导致 svg与 sidebar 重叠。

我的最后一个想法是编辑 svg 本身，因为底部可能有额外的空间导致这个问题，但我对此表示怀疑。

相关 HTML

      <div class="headerBg">
        <h1 class="headerText">Lorem Ipsum</h1>
        <div class="formatSvg">
          <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M892.25 114.72L0 0 0 120 1200 120 1200 0 892.25 114.72z" class="shape-fill" fill="#1E1E24"
              fill-opacity="1"></path>
          </svg>
        </div>
      </div>

相关CSS

main {
    margin-left: 5rem;
    padding: 1rem;
    padding: 0;
    margin: 0;
}

.headerBg {
    background: linear-gradient(45deg, #d62941, #dd412f);
    height: 30rem;
    display: flex;
    flex-direction: column;
}

.formatSvg {
    margin-top: auto;
}

标签： htmlcsssvg

解决方案

SVG 默认为display: inline-block. 就像<img>. 因此，与其他图像一样，它们位于文本的基线上。因此，您看到的差距是浏览器为descenders保留的空间。

解决方法是将 SVG 更改为display: block.

我还添加了一个justify-content: space-between;toheaderBg来强制<h1>到顶部和formatSvg底部。你的 30em 高度 div。您可能不需要在最后一页中使用此位。

.headerBg {
    background: linear-gradient(45deg, #d62941, #dd412f);
    height: 30rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.formatSvg svg {
    display: block;
}
<div class="headerBg">
  <h1 class="headerText">Lorem Ipsum</h1>
  <div class="formatSvg">
    <svg data-name="Layer 1" viewBox="0 0 1200 120" preserveAspectRatio="none">
      <path d="M892.25 114.72L0 0 0 120 1200 120 1200 0 892.25 114.72z" class="shape-fill" fill="#1E1E24"
        fill-opacity="1"></path>
    </svg>
  </div>
</div>

推荐阅读