如何将特定位置的div与具有不同高度的其他元素垂直对齐?html/css

我有一段时间在尝试从特定时刻开始向下对齐元素时遇到了麻烦，并且对不同的元素高度做出了响应。

我希望它使用显示弹性。它需要随着窗口的大小调整/减少列。感谢一吨

示例图像

试试这个代码：

.container {
background-color: #F9F9F9;
padding: 10px;
border: 2px solid #DDDDDD;
max-width: 700px;
margin: 0 auto;
height: 550px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.item {
border: 2px solid #000000;
height: 200px;
width: 26%;
margin: 10px;
padding: 10px;
}
.item:nth-child(1) {
height: 150px;
}
.item:nth-child(2) {
height: 200px;
}
.item:nth-child(3), .item:nth-child(5) {
height: 300px;
}
.item:nth-child(4), .item:nth-child(6) {
height: 160px;
}

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>

您需要的网格样式称为"Masonry Layout"。您将在网络上准备好使用cdn。只需在head标记中的script标记中嵌入一个cdn。它会变魔术。我在这里为您提供一个示例代码。

.image {
width: 100%;
object-fit: cover;
}
#image1{
height: 550px;
}
#image2{
height: 350px;
}
#image3{
height: 450px;
}
#image4{
height: 550px;
}
#image5{
height: 250px;
}
#image6{
height: 450px;
}
#image7{
height: 450px;
}
#image8{
height: 450px;
}
#image9{
height: 550px;
}
#image10{
height: 250px;
}
#image11{
height: 250px;
}
#image12{
height: 250px;
}
@media only screen and (max-width:992px) {
.image{
height:400px;
}

}
@media only screen and (max-width:768px) {
.image{
height:300px;
}
}
@media only screen and (max-width:576px) {
#image1{
height:250px;
}
#image2{
height:250px;
}
#image3{
height:250px;
}
#image4{
height:250px;
}
#image5{
height:250px;
}
#image6{
height:250px;
}
}

<!doctype html>
<html>
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!--Masonry Layout cdn-->
<script defer src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"
integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous"
async></script>
</head>
<body>
<section >
<div class="container">     
<div class="row g-3" data-masonry='{"percentPosition": true }'>
<div class="col-lg-4 col-md-6 col-12 ">
<img class="image" id="image1" src="https://i.ibb.co/YNvbbMC/0V5A0971.jpg">
</div>
<div class="col-lg-4 col-md-6 col-12">
<img class="image" id="image2" src="https://i.ibb.co/YpZ3NBH/0V5A0975.jpg">
</div>
<div class="col-lg-4 col-md-6 col-12">
<img class="image" id="image3" src="https://i.ibb.co/pxVtdR9/0V5A0980.jpg">
</div>
<div class="col-lg-4 col-md-6 col-12">
<img class="image" id="image4" src="https://i.ibb.co/CWTXksK/0V5A2619.jpg" >
</div>
<div class="col-lg-4 col-md-6 col-12">
<img class="image" id="image5" src="https://i.ibb.co/LJdmcdc/0V5A2620.jpg">
</div>
<div class="col-lg-4 col-md-6 col-12">
<img class="image" id="image6" src="https://i.ibb.co/XxMVkDX/0V5A2621.jpg">
</div>       
</div>
</div>
</section>

</body>
</html>

单击"完整页面"并调整窗口以查看其响应行为。

让我解释一下代码。

HTML片段

砌体cdn嵌入头部内部。我在这里使用了Bootstrap。它甚至可以使用常规CSS。但是Bootstrap让生活变得轻松。类"图像"对所有图像都是通用的，每个图像都有自己的id。

CSS片段

对所有图像应用100%宽度和对象拟合=覆盖，这样它们就不会溢出。接下来，我提到了图像的默认高度，以及随着窗口宽度的变化，它们的高度应该是多少。

相关内容

最新更新

热门标签：