1) 2つのdivを1つの大きなdiv(コンテナ)に配置しました。彼らは情報を持つ小さなカードのようになっています。ここには問題があります。 2枚のカードが隣り合っていて、1枚が高ければ、2枚目は1枚目のカードの一番下に位置するように動きますが、一番上に並んでいます(コードとフィドルです)。左上にも整列している間にdivを整列します。
<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/
感謝を!良い一日を!
はい!私のヒーロー ! :Dあなたの時間のためにあまりにもタンクして、私は参照してください、そして答えはかなりシンプルです、私はそんなに馬鹿ですが、私は何ができますか。すてきな一日を! –