非常に単純なHTML/CSSカードベースのダッシュボードです。未使用スペースを埋めるカードの問題。

Question

私はウェブ開発が初めてで、HTMLとCSSで非常に単純なカードベースの「ダッシュボード」ページを作成しようとしています。

jsfiddleには、これの基本的な例が示されています（内容は切り捨てられています）。私は左浮くので、以下のCSSクラスを使用して、残りのスペースを占有するように設定されている大小二つの基本的なカードのサイズを、持って見ることができるように：

.small-card, .large-card { 
    border: 1px solid gray; 
    border-radius: 3px; 
    margin: 2px; 
    float: left; 
    width: 250px; 
    height: 250px; 
} 

.small-card { 
    height: 122px; 
} 

しかし、あなたが発見したかもしれない問題があります大きいカードは小さい方のカードが左下にスペースを占めるのをブロックし、画面サイズやカードの順序に応じてレイアウトの隙間につながります。浮動小数点のプロパティだけでは私が探している結果が得られないことが明らかになりました。

私の質問は、HTMLで定義されているカードの順序を変更することなく、ダッシュボードの全体的な単純さを維持する方法で解決できますか？私はちょうどギャップが残ることなく、カードが一番左上の利用可能なスペースを占めるようにしたい。

私はそれが単純ではないと感じていますが、どんな提案も感謝しています。ありがとう。

Answer 1

これにはbootstrap grid systemをお試しください。ここで

はあなたのCSSと一緒にそれを使用していくつかのコードは次のとおりです。提案のための

.small-card, .large-card { 
 
    border: 1px solid gray; 
 
    border-radius: 3px; 
 
    height: 250px; 
 
} 
 

 
.small-card { 
 
    height: 125px; 
 
} 
 

 

 
}

<div class='row'> 
 
    <div class="col-xs-12"> 
 
    <div class="col-xs-6 large-card">1</div> 
 
    <div class="col-xs-6"> 
 
    <div class='row'> 
 
    <div class="col-xs-12 small-card">2</div> 
 
    </div> 
 
     <div class='row'> 
 
     <div class="col-xs-12 small-card">3</div> 
 
    </div> 
 
    </div> 
 
    <div class='row'> 
 
     <div class="col-xs-6 small-card">4</div> 
 
     <div class="col-xs-6 small-card">5</div> 
 
    </div> 
 
     <div class="col-xs-6"> 
 
    <div class='row'> 
 
    <div class="col-xs-12 small-card">6</div> 
 
    </div> 
 
     <div class='row'> 
 
     <div class="col-xs-12 small-card">7</div> 
 
    </div> 
 
    </div> 
 
    
 
     <div class="col-xs-6 large-card">8</div> 
 
    </div> 
 
</div> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">