gpt4 book ai didi

css - (基础)带有背景图像的网格单元格突破

转载 作者:行者123 更新时间:2023-11-28 01:21:22 28 4
gpt4 key购买 nike

我正在为我的网格系统使用基础,但这在任何网格系统中都可能是一个问题。我基本上用一个容器包裹了 3 个单元格,但其中一个单元格应该长到页面边框(留在我的 Sampe-Image 中)但这也可能在右侧)。

当我像这个 fiddle 一样定义固定宽度时,它可以工作,但是背景图像太宽了,我需要一个响应式版本:-/

HTML:

<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="large-4 cell">
<div class="specialdiv"></div>
</div>
<div class="large-4 cell">
<p>test</p>
</div>
<div class="large-4 cell">
<p>test</p>
</div>
</div>
</div>

CSS:

.specialdiv {
position: relative;
border: 1px solid red;
height: 100%;
}
.specialdiv:after {
content: "";
display: block;
top: 0;
right: 0;
height: 100%;
position: absolute;
width: 2000px;
background: url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg");
background-size: cover;
}

https://codepen.io/anon/pen/ZjeBOz

有什么提示吗?

最佳答案

我不确定你到底想要什么,但如果目标是将图像保留在单元格中而不考虑裁剪,你可以应用 overflow-x: hidden;到.specialdiv

关于css - (基础)带有背景图像的网格单元格突破,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51469787/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com