![3图像布局]( "3图像布局")
本文介绍了3图像布局 - 中心图像越来越大，Z指数也越来越高的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图做到这一点
图片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，每个子div都有一个图像（原始大小相同） / p>
目前的CSS
.imageBanner {
display：flex ;
align-items：center;
宽度：100％;
max-width：1024px;}
.imageLeft img {
最大宽度：60％;
}
.imageCentre {
z-index：9999;
position：relative;
}
.imageCentre img {
width：100％;
}
.imageRight img {
最大宽度：60％;
$ b因此，我所做的是使用flex对齐沿x轴的图像。然后，我给了中心的形象一个绝对的位置，以便z-索引被考虑在内。然而，这是我遇到的问题，图像不像上面的例子。
这是一个例子，如果它有帮助
.imageBanner {display：flex; align-items：center;宽度：100％;最大宽度：1024px;}。imageLeft img {max-width：60％;}。imageCentre {z-index：9999; 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>
感谢
Tom
解决方案
你有没有想过这样的事情：
hide =falsedata-console =truedata-babel =false> .imageBanner {display：block;位置：相对;保证金：0汽车;宽度：100％;最大宽度：1024px;}。imageLeft {width：40％;显示：块;位置：绝对;左：0;顶部：30px; z-index：-1;}。imageCentre {width：60％;显示：块;位置：相对; z-index：1; margin：0 auto;}。imageRight {width：40％;显示：块;位置：绝对;正确：0;顶部：30px; z-index：-1;} img {width：100％;} < 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>
改变左：属性，右图缩进右改右：
I am trying to achieve this
Image 1 and 3 would be slightly hidden behind image 2.
I have this 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>
Simple setup, single containing div with three sub divs each holding an image (identical native size).
Current 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%;
}
So what I have done is aligned the images along the x axis using flex. I have then given the center image a position of absolute so that the z-index is taken into account. However this is where I run into the issue and the images are not laying out like the above example.
Here is a example if it helps
.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>I feel like I may be close and will keep trying but any help will be great!
ThanksTom
解决方案
Did you think about something like this:
.imageBanner {
display: block;
position: relative;
margin: 0 auto;
width:100%;
max-width: 1024px;
}
.imageLeft {
width: 40%;
display: block;
position: absolute;
left: 0;
top: 30px;
z-index: -1;
}
.imageCentre {
width: 60%;
display: block;
position: relative;
z-index: 1;
margin: 0 auto;
}
.imageRight {
width: 40%;
display: block;
position: absolute;
right: 0;
top: 30px;
z-index: -1;
}
img {
width: 100%;
}<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>Left image's left indent you can set by change left: attribute, and right image's right indent change right:
这篇关于3图像布局 - 中心图像越来越大，Z指数也越来越高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！