左上にも整列している間にdivを整列します。

Question

1） 2つのdivを1つの大きなdiv（コンテナ）に配置しました。彼らは情報を持つ小さなカードのようになっています。ここには問題があります。 2枚のカードが隣り合っていて、1枚が高ければ、2枚目は1枚目のカードの一番下に位置するように動きますが、一番上に並んでいます（コードとフィドルです）。

<div class="main-cards"> 
     <div class="card" style="width: 65%;"> 
      <h1>CARD 1</h1> 
      <p>small</p> 
      <p>small</p> 
      <p>small</p> 
     </div> 
     <div class="card" style="width: 25%;"> 
      <h1>CARD 2</h1> 
      <p>small</p> 
     </div> 
    </div> 


    .main-cards{ 
     position: relative; 
     height: auto; 
     width: 80%; 
     margin-left: auto; 
     margin-right: auto; 
     top: 150px; 
     text-align:center; 
     background-color: #6ab5dd; 
    } 
    .card{ 
     display: inline-block; 
     background-color: white; 
     height: auto; 
     margin: 10px; 
     margin-top: 40px; 
     padding: 8px; 
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
    } 

FIDDLE：https://jsfiddle.net/4px7kc4v/2/

が、私はそれをしたい方法：

2） はどのように垂直方向に中央に一つの大きなコンテナの中央に3枚のカードを行うが、このレイアウトのだろうか？ （IMGを見て）

私はこの問題があるので：すべての人のための時間https://jsfiddle.net/sx7ryv70/

感謝を！良い一日を！

Answer 1

1） カードのCSSにこれを追加.cardする：inline-blocksとしてのdivの持つ

 vertical-align: top; 

2）は、彼らがしているかのように同じ '行' になるためにそれらを強制します巨大なテキスト文字。より小さなカードをそれぞれのコンテナに合わせて試してみてください。

Answer 2

垂直アライメントを追加：

Answer 3

あなたのソリューション：ここ

1. [link](https://jsfiddle.net/Atula/4px7kc4v/3/)

2. [link](https://jsfiddle.net/Atula/sx7ryv70/1/)

Answer 4

このJSfiddle

HTMLを見て

<div class="main-cards"> 
     <div class="card" style="width: 55%; height: 300px; float:left;"></div> 
     <div class="card" style="width: 55%; height: 300px; margin-top: 50px; float: left;"></div> 
     <div class="card" style="width: 25%; height: 650px;"></div> 

CSS

.main-cards { 
 

 
     position: relative; 
 

 
     height: auto; 
 

 
     width: 80%; 
 

 
     margin-left: auto; 
 

 
     margin-right: auto; 
 

 
     top: 50px; 
 

 
     text-align: center; 
 

 
     background-color: #6ab5dd; 
 

 
     padding: 30px; 
 

 
    } 
 

 
    .card { 
 

 
     display: inline-block; 
 

 
     background-color: white; 
 

 
     height: auto; 
 

 
     margin: 10px; 
 

 
     margin-top: 40px; 
 

 
     padding: 8px; 
 

 
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
 

 
    }

あなたが覚えておく必要があるのは、フローティング原則です。