与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型号!

使用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成长,而空间是可用的,但它们是变形.

这是一个演示,以及一些参考和附加内容:

• Caniuse.com上的兼容性图表
• Flexbox上的MDN教程
• CSSTricks.com上的Flex教程
• MDN上的Flex参考