0

サイド プロジェクトで angular2-material を使用してきましたが、カードを水平に積み重ねることができませんでした。それらは自動的に全幅を占めます。css クラスを使用して幅を制限しても、それらがスタックすることはありません。その後に配置されたすべてのカードは、前のカードの下に配置されます。

カードを水平に並べて配置する方法 (および画面の端に到達したときに適切に折り返す方法) について、いくつかのガイダンスをいただければ幸いです。

4

2 に答える 2

2

フレックスボックスは他の回答に示されている最新のアプローチですが、すべてのブラウザーで完全にサポートされているわけではないため、いくつかのブラウザーで問題に直面する可能性があります。それ以外は、次の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>を持つ親 div 内に配置してください。flex動作するはずです。うまくいかない場合は、マテリアル 2 で plnkr を作成できます

編集

フレックスが機能するMaterial 2プランカー

http://plnkr.co/edit/zHndJLKRSvTQUV1G6Bgp

于 2017-01-08T04:44:03.893 に答える