我有一个情况,我有一个容器div
元素,并且在这个容器中有一个内部元素(在这个例子中是一个图片)。我希望发生以下情况:
- 如果容器div比内部元素高,内部元素应该放在容器的底部。
- 如果容器div小于内部元素,则应将其放置在容器的顶部,并裁剪底部。
我遇到的主要困难是内部元素的高度是可变的。理想情况下,我希望有一个只使用CSS的解决方案(当然,如果使用JavaScript,这会更容易)。
部分解决方案
在内部元素高度已知且固定的情况下,我已经设法通过以下(CodePen link)获得了所需的结果:
.container {
margin-top: 30px;
margin-bottom: 30px;
background-color: red;
overflow: clip;
height: 100vh;
position: relative;
container-type: size;
}
.inner {
background-image: linear-gradient(green, yellow);
height: 400px;
width: 200px;
}
.option1 {
position: absolute;
@container (max-height: 400px) {
top: 0;
}
@container (min-height: 400px) {
bottom: 0;
}
}
<div class="container">
<div class="inner">
</div>
</div>
我不知道这是否能为任何解决方案提供一个有用的起点。这可以很容易地通过在@container
查询中访问当前元素的高度来解决。
1条答案
按热度按时间mo49yndu1#
只需使用一个伪元素并将
.container
设置为flex-direction: column
:伪元素
::before
的高度为0(因为我们没有指定任何高度),所以它对用户不可见。但是,如果它有一定的高度,我们的布局(没有display: flex
)将如下所示:display: flex
(使其成为一个flexbox),flex-direction: column
(垂直放置元素)和justify-content: space-between
(元素之间的最大空间)的组合使两个元素接触两个相对的侧面:如果
.container
的高度没有它的子元素的高度之和高,它会首先尝试缩小它的子元素。因为::before
从一开始就没有任何高度,而.inner
已经适合它的内容,所以它们之间的空间将折叠为0,.inner
将是clip
-ped:试试看: