响应式对齐、浮动和居中图片

Question

我正在尝试编写HTML和CSS代码，使得三张截图图片能够像下面的屏幕截图一样对齐。

当用户缩小窗口时，左右两侧的图片应该向中心移动，或者更加紧密地靠在主要图片后面，而主要图片始终保持居中。

我的开发链接： http://leongaban.com/portfolio/athenasweb/ 我的CodePen链接： http://codepen.io/leongaban/pen/AwJFt

And tips or direction would be super appreciated! :D

HTML

<div class="pattern">

    <div class="athena_thumbs">

        <div class="first">
            <img src="../../images/athena1.jpg"/>
        </div>

        <div class="second">
            <img src="../../images/athena2.jpg"/>
        </div>

        <div class="third">
            <img src="../../images/athena3.jpg"/>
        </div>

    </div>

</div>

CSS

div.inner .pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:url('http://leongaban.com/images/pattern_diagonal_lines.png');
    background-repeat: repeat;
    z-index:2;
 }    

.athena_thumbs {
    position: absolute;
    max-width: 1000px;
    margin: 250px auto 0;
}

.athena_thumbs .first {
    position: relative;
    margin: 0 auto;
    float: left;
    left: 25%;
    right: 25%;
    z-index: 3;
}

.athena_thumbs .second {
    position: relative;
    float: left;
    left: 10%;
    right: 5%;
    z-index: 2;
}

.athena_thumbs .third {
    position: relative;
    float: left;
    right: 10%;
    left: 5%;
    z-index: 1;
}

- Leon Gaban

Answer 1

会议快要迟到了。 但是，如果你看一下

Code Pen：http://codepen.io/anon/pen/bazEr

.athena_thumbs {
    position: absolute;
    width: 90%;
    margin-left: 5%;  
    text-align: center;
    overflow: hidden;
}

.athena_thumbs .first {
    position: relative;
    margin: 0 auto;
    z-index: 3;
}

.athena_thumbs .second {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
}

.athena_thumbs .third {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1;
}

我认为这会让你朝着正确的方向前进。 没有任何跨浏览器检查的障碍。 只是基本的按照效果或多或少已经实现。

希望这能帮到你。

- Claude

Answer 2

我希望这能对你有所帮助。我制作了一个小演示，展示了如何实现你想要的效果，你可以在这里找到。

我会将外部缩略图设置为position: absolute;，将它们粘贴到父容器的两侧，并确保给它们一个顶部位置来保持它们在同一行。将居中缩略图设置为position: relative，并像平常一样使用自动边距将其居中。z-indexing使外部缩略图位于居中缩略图后面。

- John