与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！

在包装div上使用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，以及一些参考和附加内容：

Caniuse.com上的
• Compatibility chart
• 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 */
}