为什么这些div会相互重叠？
为什么这些div会相互重叠？
提问于 2021-06-26 23:49:41
我有一小段代码，其中DIVs相互重叠。我已经删除了不会影响问题的代码。
这个想法是，如果你滚动，你滚动到右边的一些卡片，如果你通过，你向下滚动到下一组卡片。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
}
.horizontal {
width: 100vw;
height: 100vh;
}
.title {
font-size: 1em;
padding: 1em;
}
.scroll-view {
overflow-y: auto;
overflow-x: hidden;
padding-top: 90vh;
width: 90vh;
height: 100vw;
transform: rotate(-90deg) translateY(-90vh);
transform-origin: right top;
perspective: 1000px;
}
.container {
transform: rotate(90deg);
transform-origin: right top;
max-height: 80vh;
display: flex;
justify-content: center;
align-items: center;
}<!DOCTYPE html>
<html lang = "de">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
<div class = "vertical">
<div class = "horizontal">
<div class = "title">
<h1>horizontal-title</h1>
</div>
<div class = "scroll-view">
<div class = "container">
container
</div>
<div class = "container">
container
</div>
</div>
</div>
</div>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-06-27 00:08:37
它们重叠是因为你在边上rotate它们。如果你想把它们分开，只需在它们之间加一个空白处-这样当它们旋转时，它们就不会相互旋转。
在本例中，我向第二个容器添加了边距。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
}
.horizontal {
width: 100vw;
height: 100vh;
}
.title {
font-size: 1em;
padding: 1em;
}
.scroll-view {
overflow-y: auto;
overflow-x: hidden;
padding-top: 90vh;
width: 90vh;
height: 100vw;
transform: rotate(-90deg) translateY(-90vh);
transform-origin: right top;
perspective: 1000px;
}
.container {
transform: rotate(90deg);
transform-origin: right top;
max-height: 80vh;
display: flex;
justify-content: center;
align-items: center;
}<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
<div class="vertical">
<div class="horizontal">
<div class="title">
<h1>horizontal-title</h1>
</div>
<div class="scroll-view">
<div class="container">
container
</div>
<div class="container" style="margin-top: 100px">
container
</div>
</div>
</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68144002
复制相关文章
相似问题
腾讯云开发者
