html - 如何阻止 md-card 占据整个水平宽度？我如何并排放置它们？

Question

我一直在我的副元素中使用 angular2-material，但无法水平堆叠卡片。它们会自动占据整个宽度。通过 css 类限制宽度不会导致它们堆叠。所有随后放置的卡片仍将放置在之前的卡片下方。

如果能提供有关让卡片水平并排放置(并在它们到达屏幕边缘时适当环绕)的指导，我将不胜感激。

Answer 1

Flex-box 是其他答案中显示的最新方法，但您可能会遇到少数浏览器的问题，因为它并非所有浏览器都完全支持。因此，除此之外，Twitter-bootstrap-css也可以如下使用，

<div class="col-xs-12">
     <div class="col-sm-6">
             <md-card>
                  ...
             </md-card>
     </div>

     <div class="col-sm-6">
              <md-card>
                   ...
              </md-card>
     </div>
</div>