0

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

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

4

2 回答 2

2

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>
于 2017-01-08T04:58:46.510 回答
1

你可以使用flex-box：

https://jsfiddle.net/ntmrtnwu/

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

于 2017-01-08T04:44:03.893 回答