gpt4 book ai didi

html - 带滚动的CSS网格

转载 作者:行者123 更新时间:2023-12-04 15:00:11 24 4
gpt4 key购买 nike

我创建了一个由 css 制成的容器 grid , 所以我可以垂直或水平对齐元素(取决于配置)。

网格项只有一个 child 。当 child 比容器时,我希望 child 在中心,如果 child ,则容器有一个滚动条

为此,我将网格设置为 align-items: center .它适用于 chrome 但在 firefox 上 child 被剪掉了。
然后我做了另一种方法,用 align-content: center .它适用于 firefox 但不适用于 chrome。然后我都应用了,它也不起作用。

enter image description here

我希望网格在没有平台特定前缀的情况下在两种浏览器(或任何浏览器)上工作 -webkit--moz--whatever- .

有什么想法吗?

查看我的代码 sanbox:https://codesandbox.io/s/html-css-forked-w4txx?file=/styles.css

:root {
--conf-horz-align: center;
--conf-vert-align: center;
}

.container {
background: pink;
border: inset 4px blue;

height: 200px;

display: grid;
justify-content: var(--conf-horz-align);

/* works on chrome but not on firefox */
/* align-items: var(--conf-vert-align); */

/* works on firefox but not on chrome */
align-content: var(--conf-vert-align);

overflow-y: auto;
}

.window {
background: lightblue;
border: inset 16px red;
width: 400px;
}
.window.short {
height: 120px;
}
.window.tall {
height: 300px;
}
<!DOCTYPE html>
<html>
<head>
<title>Another simple example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div class="window short">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum, quod nesciunt laudantium minus commodi quia corrupti nihil quas dolor eos velit pariatur consequatur error excepturi dicta facilis dolorem numquam vero.</p>
</div>
</div>
<hr>
<div class="container">
<div class="window tall">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum, quod nesciunt laudantium minus commodi quia corrupti nihil quas dolor eos velit pariatur consequatur error excepturi dicta facilis dolorem numquam vero.</p>
</div>
</div>
</body>
</html>

最佳答案

在您的示例中,codesandbox 本身似乎出了问题。 CSS 文件加倍,对我来说变得冲突。我尝试将您的代码复制到外部,它在 Chrome、Firefox 和 Safari 上运行良好

align-items: var(--conf-vert-align);

检查一下:https://testing.accidentallydrawn.com/

关于html - 带滚动的CSS网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67100283/

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