正如你在下面的代码片段中看到的，我很难让蓝色覆盖贴在图像上，但是正如你所看到的，在左侧，由于某种原因，它没有贴在图片上。是的，我希望一整列的位置比另一列低/高一点，所以这里我尝试将整列1定位70px，但它撕裂了蓝色覆盖层和图像。有什么想法吗？
null
* {box-sizing: border-box;padding: 0;margin: 0;}
.row{
display:flex;
}
img{
width:300px;
height:200px;
}
.container{
margin: auto;
width: 50%;
}
.column1{
margin-top: 70px;
margin-right: 15%;
position:relative;
}
.column2{
margin-top: 120px;
position:relative;
}
.text h1{
width:300px;
}
.text h1{
font-family: muli, sans-serif;
font-size: 2.5rem;
font-weight:100;
}
.column2 .cover{
position:absolute;
bottom: 0px;
font-family: muli, sans-serif;
font-weight:1000;
width: 100%;
background-color: #00B5FD;
}
.column1 .cover{
position:absolute;
bottom: 0px;
font-family: muli, sans-serif;
font-weight:1000;
width: 100%;
background-color: #00B5FD;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.typekit.net/dsl6sbt.css">
</head>
<body>
<div class="container">
<div class="row1 row">
<div class="column1 text">
<h1>Solutions for<br> medical<br> applications</h1>
</div>
<div class="column2">
<img src="Fluids.jpg" alt=""></img>
<div class="cover">Fluids</div>
</div>
</div>
<div class="row2 row">
<div class="column1">
<img src="medical.jpg" alt="">
<div class="cover">Fluids</div>
</div>
<div class="column2">
<img src="SurgicalTools.jpg" alt="">
<div class="cover">Fluids</div>
</div>
</div>
<div class="row3 row">
<div class="column1">
<img src="DrugDevice.jpg" alt="">
<div class="cover">Fluids</div>
</div>
<div class="column2">
<img src="Packaging.jpg" alt="">
<div class="cover">Fluids</div>
</div>
</div>
<div class="row4 row">
<div class="column1">
<img src="HomeCare.jpg" alt="">
<div class="cover">Fluids</div>
</div>
<div class="column2">
<img src="Labware.jpg" alt="">
<div class="cover">Fluids</div>
</div>
</div>
</div>
</body>
</html>null
这是因为每一行都显示为FlexBox。
右边的列比右边的列有更大的顶部边距，这导致flexbox增长到比图像和蓝色标签的高度更高。
因为蓝色标签绝对位于容器的底部，这会导致它们分裂。
如果从蓝色标记中删除bottom:0；并将img更改为display:block；（删除两个元素之间的间隙），则会使其表现得更好。
编辑：实际上我在这里找到了另一个解决问题的方法：防止flex项目的高度扩展以匹配其他flex项目
如果您将高度：0%；添加到flexbox内容(.column1)中，那么它将使其神奇地工作，不做其他更改，保持位置：绝对；和底部：0；。
