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

Question

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

我希望能得到一些指导，让卡片水平并排放置（并在它们到达屏幕边缘时适当包裹）。

Answer 1

您可以使用 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;
}

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

编辑

Material 2 plunker 具有功能性 flex

http://plnkr.co/edit/zHndJLKRSvTQUV1G6Bgp

Answer 2

Flex-box 是其他答案中所示的最新方法，但您可能会遇到少数浏览器的问题，因为它并未得到所有浏览器的完全支持 browsers.So，其他除此之外，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>

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

How do I stop md-card from taking full horizontal width? How do I place them side by side?

html

css

angular2-material

angular