我正在努力实现这一目标
图1和图3将稍微隐藏在图2后面。
我有这个html
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
简单的设置,一个包含div,三个子div每个包含一个图像(相同的原始大小)。
当前CSS
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;}
.imageLeft img{
max-width: 60%;
}
.imageCentre {
z-index: 9999;
position: relative;
}
.imageCentre img{
width: 100%;
}
.imageRight img{
max-width: 60%;
}
所以我所做的是用flex将图像沿着x轴对齐。然后,我给中心图像一个绝对位置,以便考虑z索引。然而,这就是我遇到的问题,图像并没有像上面的例子那样布局。
这里有一个例子,如果它帮助
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;
}
.imageLeft img{
max-width: 60%;
}
.imageCentre {
z-index: 9999;
position: relative;
}
.imageCentre img{
width: 100%;
}
.imageRight img{
max-width: 60%;
}
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
我觉得我可能很接近,并会继续尝试,但任何帮助将是伟大的!
谢谢汤姆
4条答案
按热度按时间ffx8fchx1#
你有没有想过这样的事情:
左侧图像的左侧边框可以通过更改
left:
属性来设置,右侧图像的右侧边框可以更改right:
c90pui9n2#
如小提琴所示:https://jsfiddle.net/fce2n85s/1/
bqjvbblv3#
在你的代码中没有什么变化,只是在你的css代码中添加了这个css。如果有用就回答我!
z9zf31ra4#