CSS - 如何将3个div与每个div大小相等的图像水平对齐[重复]

Question

CSS - 如何将 3 个 div 与背景图像水平对齐，每个 div 的大小相等？

我正在使用以下样式，并且 3 个 div 水平显示，但我不知道如何平均拆分 3 个 div 以占据 100% 的宽度。

.div-1 {
 background: url('images/iamge1.jpg');
}
        
.div-2 {
 background: url('images/image2.jpg');
}
        
.div-3 {
 background: url('images/image3.jpg');
}
            
.div-1,
.div-2,
.div-3 {
 display: inline-block;
 background-size: cover;
 background-position: 50% 50%;
}

谢谢。

Answer 1

.div-1 {
    background: url('images/iamge1.jpg');
    background:yellow;
}
    
.div-2 {
    background: url('images/image2.jpg');
    background:red;
}
    
.div-3 {
    background: url('images/image3.jpg');
    background:green;
}
        
.div-1,
.div-2,
.div-3 {
    display: inline-block;
    background-size: cover;
    background-position: 50% 50%;
    height:150px;
    width: 33.3333333333%;
}
.parent-container {
    display: flex;
}

<div class="parent-container">
  <div class="div-1"></div>
  <div class="div-2"></div>
  <div class="div-3"></div>
</div>

请将width:33.3333333333% 添加到每个 div 并添加高度，因为您的 div 没有高度并将 display:flex 添加到父容器。 目前，我添加了高度和背景颜色，因为您的图像是本地图像，如果它正在工作，您可以删除背景颜色