使用css html的響應式紙牌設計

Question

我試圖創建一個響應顯示寬度的紙牌隊列。

我想這個隊列是適合顯示寬度，使無卡獲得從顯示器丟失。我想涵蓋手機，平板電腦和桌面的傳統寬度。

我也想把這個隊列調整到中心位置，以免看起來不好。

jsfiddle

<div> 
    <img src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt=""> 
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt=""> 
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt=""> 
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt=""> 
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt=""> 
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt=""> 
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt=""> 
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt=""> 
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt=""> 
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt=""> 
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt=""> 
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt=""> 
</div> 

div{ 
    width:100%; 
} 
img{ 
    display: inline-block; 
    height: 200px; 
} 
.rest{ 
    margin-left: -102px; 
} 

Answer 1

這是一個完美的結合爲新Flexbox model！

你的包裹格

使用display:inline-flex，並刪除display:inline-block上img：

div{ 
    width:100%; 
    display:inline-flex; 
} 
img{ 
    height: 200px; 
} 
.rest{ 
    margin-left: -102px; 
    /*flex-grow:1;*/   /* Bonus : all available width is occupied */ 
} 

的flex-grow:1導致你img增長，而空間是可用的，但它們變形。

這裏有一個demo，和一些參考和演員：

• Compatibility chart上Caniuse.com
• MDN tutorial on Flexbox
• Flex tutorial on CSSTricks.com
• Flex reference on MDN

Answer 2

如果你想更好的瀏覽器兼容性，你可以做到this way

• 讓所有的卡都class="rest"
• 更新你的CSS這個

div{ 
    width:100%; 
    text-align:center;  /* If you want it centered */ 
    padding-right:102px; /* Inverse the value of the card's right margin */ 
    box-sizing:border-box; /* Because we want the padding to be included in the width calculation */ 
} 
img{ 
    display: inline-block; 
    height: 200px; 
} 
.rest{ 
    margin-right: -102px; /* Use margin-right instead of margin-left */ 
}