我创建了一个网页，它有一个菜单导航的元素，我很难正确地放置元素。所以我有4个不同颜色的方块，它们需要放置在底部，以类似于一个艺术品。我创建了页面和元素，但由于某种原因，方块被卡在顶部，如果我尝试使用边距来移动它们，它们不会真正移动。
网页现在看起来怎么样-x1c 0d1x
参考图像-
下面是我的HTML：
<!doctype html>
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Homepage</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="block block-1">
<h1>Joseph Albers</h1>
</div>
<div class="boxes">
<a href=bio.html class="block block-2">
<h2>Biography</h2>
</a>
<a href="artworks.html" class="block block-3">
<h2>Artworks</h2>
</a>
<div class="block block-4">
<h4>German-born artist and educator. The first living artist to be given a solo show at MoMA and at the Metropolitan Museum of Art in New York</h4>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</body>
</html>我的CSS：
.block{
padding: 2vw;
position: absolute;
display:flex;
bottom: 5vw;
left: 50%;
overflow: hidden;
transform: translate(-50%, 0%);
}
.block-1{
background: red;
position: relative;
transform: none;
top: 0;
bottom: 0;
left: 0;
width: 100vw;
height: 100vw;
transition: background-color 0.3s ease-in-out;
}
.block-2{
background: orange;
width: 80vw;
height: 80vw;
transition: background-color 0.3s ease-in-out;
}
.block-3{
background: yellow;
width: 50vw;
height: 50vw;
transition: background-color 0.3s ease-in-out;
}
.block-4{
background: green;
width: 30vw;
height: 30vw;
padding-bottom: 20px;
margin-bottom: 20px;
transition: background-color 0.3s ease-in-out;
}
.boxes {
margin-top: 350px;
margin-left: 70vw;
}
.block:hover{
background-color: rgba(255,255,255,0.5);
}最初，块都是亲戚，它被放置好。但是，它在悬停时产生了一个交互问题，因为它不会改变颜色。所以，我让它们成为独立的组件，但在我这样做之后，它们都卡在顶部。
1条答案
按热度按时间hzbexzde1#
你有没有试过使用顶部或底部的css属性？
在这种情况下，如果你想移动橙子方块，你可以这样做：