響應對齊，浮動和居中圖像

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將外部拇指保持在居中的位置。