如何阻止md卡獲取完整的水平寬度？我如何將它們並排放置？

Question

我一直在我的項目中使用angular2-material，並且無法水平堆疊卡片。它們自動佔據全寬。通過css類限制寬度不會導致它們堆疊。隨後放置的所有卡片仍將放置在之前的位置。

我希望得到一些指導，讓卡片水平放置（並在屏幕邊緣適當環繞）。

Answer 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中。應該管用。如果你不能讓它工作，我可以創造一個plnkr用料2

編輯

材料2 plunker與運作柔性

http://plnkr.co/edit/zHndJLKRSvTQUV1G6Bgp

Answer 2

Flex的盒子是最新方法如其他答案中所示，但您可能會遇到少數瀏覽器的問題，因爲它不是所有瀏覽器都完全支持的。所以，除此之外，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>