javascript 使用CSS将底部div容器向上扩展到顶部容器div

6tdlim6h 于 2023-02-28 发布在 Java

关注(0)|答案(1)|浏览(154)

我想通过向上推底部的灰色容器来降低SVG的高度，从而使顶部的图像容器变小：

因此它看起来如下所示：

<div class="card">
    <div class="card__media">
        <img src="/widget.svg" alt="err"></div>
    <div class="card__content-container">
        <div class="card__header-body-container">
            <div class="card__header">
                <div class="card__header-container">
                    <div class="card__title-container">
                        <h6 class="card__title">Title</h6>
                    </div>
                </div>
            </div>
            <div class="card__body">
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s.
                </p>
            </div>
        </div>
    </div>
</div>

我试着用边距、填充和z索引来尝试这样做，但我不能得到正确的结果
此处为代码沙箱示例：https://codesandbox.io/s/musing-ives-qidvy6?file=/src/Example/Example.js

JavaScript

来源：https://stackoverflow.com/questions/75581316/extend-bottom-div-container-upwards-into-top-container-div-using-css

1条答案

按热度按时间

j13ufse21#

首先，请原谅我使用了令人讨厌的颜色，边框和背景-这些只是为了显示什么在哪里。
这里的关键是我把整个card-container做成了一个12 w X 8h的“网格”，然后把图像放在第1行到第5行，然后把card__content-container覆盖在第5行开始的图像上。
这是CSS的关键部分：

.card-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8 1fr);
}
.card-image {
  grid-column: 1 / span 12;
  grid-row: 1 / span 5;
  aspect-ratio: 16 / 9;
}

.card__content-container {
  grid-column: 1 / span 12;
  grid-row: 5 / span 6;
  background-color: #dddddd88;
}

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 使用CSS将底部div容器向上扩展到顶部容器div

1条答案

相关问题

热门标签

最新问答