响应对齐，浮动和居中图像

Question

我想弄清楚如何编写我的HTML & CSS以使3张截图图像对齐，如下面的截图所示。

这个想法是，当用户调整窗口的大小时，左右图像应朝中心移动，或者在主图像后面更紧，主图像始终保持居中。

我的开发链接： http://leongaban.com/portfolio/athenasweb/

我CodePen http://codepen.io/leongaban/pen/AwJFt

和提示，或者方向将是超级感谢！ ：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; 
} 

Answer 1

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

典笔：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; 
} 

我认为这将让你在正确的方向前进。 跨浏览器检查的方式没有任何问题。 只是基本相应的效果或多或少。

希望这会有所帮助。

Answer 2

我希望这可以帮助你。我已经做了一个小例子，说明如何获得你以后的效果，你可以找到here。

我会将外部缩略图设置为position: absolute;，将它们粘贴到父容器的任一侧，并确保您给它们一个排名靠前的位置以使它们保持一致。将居中的缩略图设置为position: relative，并像平常一样将其居中放置自动边距。 z-indexing将外部拇指保持在居中的位置。