Question

我在我的侧面项目中一直使用angular2-materials而无法水平堆叠卡片。它们会自动占据整个宽度。通过css类限制宽度不会导致它们堆叠。随后放置的所有卡片仍将放在前一张卡片下面。

我很欣赏一些关于让卡片水平并排放置的指导（当它们到达屏幕边缘时适当地包裹）。

Answer 1

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

Twitter-bootstrap-css

Answer 2

您可以使用flex-box：

HTML 的

<div class="parent">
  <div class="child"> </div>
  <div class="child"> </div>
  <div class="child"> </div>
</div>

CSS

.parent {
  display: flex;
  justify-content: space-between;
}
.child {
  margin: 10px;
  background: red;
  width: 100%;
  height: 20px;
}

用<md-card></md-card>选择器替换子div，但是将它们放在具有flex属性的父div中。应该管用。如果你不能使它工作，我可以创建一个带有material2的plnkr

修改

具有弹性功能的材料2弹药

http://plnkr.co/edit/zHndJLKRSvTQUV1G6Bgp