角2の材質：1行にカードを作る

ここで簡単なコードを作ったhttp://embed.plnkr.co/INpybaat2XZqdStsKAdy/。カードは1行に表示されませんでした。それを1行に表示するには？ありがとうございました。角2の材質：1行にカードを作る

2016-10-06 Christoforus Surjoputro

md-カードのCSSファイルのfloat: left;を試してください。このように： https://plnkr.co/edit/INpybaat2XZqdStsKAdy?p=preview

2016-10-06 10:54:52 eugene

のために、私はカードをレンダリングどのようにして作品を試みたが、フロートの変化挙動ました。これが私の言うことです。 https://postimg.org/image/685zykbc5/ –

正確にはどういう意味ですか？私はまだ理解していない。 – eugene

自分の画像へのリンクがありませんか？私は両方のカードが同じ行に（floatを使用して期待どおりに）レンダリングされたが、カードの高さが変わる（両方のカードの高さが異なる）スクリーンショットを共有しました。 [link]（postimg.org/image/685zykbc5） –

カードのコンテナとしてフレックスボックスを使用できます。

<div id="card-container"> 
    <md-card class="short"> 
     <md-card-title-group> 
     <img md-card-sm-image src="https://image.freepik.com/free-photo/blue-surface-with-creases_1160-191.jpg"> 
     <md-card-title>Hi</md-card-title> 
     <md-card-subtitle>Have a nice day</md-card-subtitle> 
     </md-card-title-group> 
    </md-card> 
    <md-card> 
     <md-card-title-group> 
     <img md-card-sm-image src="https://image.freepik.com/free-photo/blue-surface-with-creases_1160-191.jpg"> 
     <md-card-title>One</md-card-title> 
     <md-card-subtitle>Is the first order in numeric</md-card-subtitle> 
     </md-card-title-group> 
    </md-card> 
</div>

とapp.component.css

md-card { 
max-width: 150px; 
margin: 4px; 
} 

#card-container { 
display: flex; 
    flex-flow: row wrap; 
}

https://plnkr.co/edit/V0pegO?p=preview

出典

2016-10-06 13:07:51 JayChase

こんにちは@JayChase。あなたの答えは最初のものより優れていますが、ブラウザがどのようにレンダリングするかについては少し変わります。あなたの＃カード - 容器なしで試してみてください（もちろんそれは別の行に表示されます）、カードの高さを測定してください。それはカードの高さを少し変えます。あなたは両方のカードを同じ行に適切な方法で作る方法について、他に何か提案がありますか？ –

@ChristoforusSurjoputroはあなたの '#card-container'スタイルに' align-items：flex-start; 'を追加します。 'align-items'のデフォルト値は" stretch "です。これはすべての要素を同じ高さにします。 –

角2の材質：1行にカードを作る

答えて

関連する問題