html - 似乎无法让图像相互叠加

Question

我一直在尝试制作我自己的自动图像 slider ，但出于某种原因，我似乎无法在正确的位置默认显示我想要的 3 张图像。我想要一个主图像在一个 div 的中间，然后在右边显示另外两个(宽度更小)，并被 overflow: hidden 切断。就我对 CSS 和 HTML 的了解而言，我已经尝试了所有方法，但就是无法让它看起来正确。下图显示了我试图使用 HTML 和 CSS 完成的任务。

图片:Very Artistic Image

HTML & CSS

Answer 1

为此做过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 的教程，反正这是布局的 future 。

这是笔的链接。

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