Question

我一直在尝试制作自己的自动图像滑块，但出于某种原因，我似乎无法将我想要显示的3张图像默认显示在正确的位置。我希望在div的中间有一个主图像，然后在右边显示另外两个（宽度较小），用溢出切掉：隐藏。就我对CSS和HTML的了解而言，我已经尝试了所有内容，并且无法让它看起来正确。下图显示了我尝试使用HTML和CSS完成的任务。

图片：Very Artistic Image

HTML & CSS

Answer 1

这很麻烦，但我认为这是对你所寻找的东西的粗略概念。

＆＃13;

#main {
    width: 0%;
    background-color: lightgreen;
    margin: 0;
    padding: 0;
    position: fixed;
}
 
#sliderImage {
    position: relative;
    top: 20%;
    right: 50%;
    left: 0;
    width: 40%;
    background: red;
    margin: 0;
}
 
#image1, #image2, #image3 {
    width: 400px;
    height: 200px;
    position: absolute;
    z-index: 1;
  border: 5px solid black;
}
 
#image2 {
    left:105px;
    z-index:-1;
    
}

#image3 {
    left:210px;
    z-index:-2;
}

＆＃13;

<div id="main">
    <div id="sliderImage">
        <img src="http://lorempixel.com/600/300/sports" alt="image 1" id="image1"/>
        <img src="http://lorempixel.com/600/300/sports" alt="image 2" id="image2"/>
        <img src="http://lorempixel.com/600/300/sports" alt="image 3" id="image3"/>
    </div>
</div>

＆＃13;

Answer 2

为此完成了一个flexbox解决方案：

#image1 {-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 8 1 auto;
-ms-flex: 8 1 auto;
flex: 8 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;}

这是相关部分。

这是另一个相关部分：

#image2:hover{
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 98 1 auto;
-ms-flex: 98 1 auto;
flex: 98 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}

解释起来非常复杂，最好检查一下flexbox上的教程，无论如何都是布局未来。

以下是笔的链接。

http://codepen.io/damianocel/pen/ZBbjOp

似乎无法让图片彼此重叠

2 个答案: