応答性のあるデザインでのスタッキング

Question

固定ヘッダーとサイドバーのナビで応答性の高いダッシュボードを作成しています。私は、以下に示すテンプレートを作成しようとしていますが、divのスタッキングの問題が生じています：

代わりに、私は彼らがここでは、この画像のように積み重ねて取得することができます。

私は以下のスタイルを持つdivのラッパーを持っています：

width: 100%; 
padding: 15px; 

divs自体次のスタイルで容器に包まれています。

display: inline-block; 
width: 50%; 
padding: 15px; 
float: left; 
vertical-align: top; 

どうやら、垂直整列：トップは、この問題を解決することになっているが、私は右の位置に黄色のdivを取得することができていません。 アイデア

Answer 1

これを実現するにはJavascript Masonry Grid Layoutできます。

MasonryはJavaScriptグリッドレイアウトライブラリです。利用可能な垂直スペースに基づいて最適な位置に要素を配置することによって機能します。あなたはおそらくそれがインターネット上で使用されているのを見てきました。石積みのライブラリを使用して

、このようにシンプルな。

<div class="grid"> 
    <div class="grid-item">...</div> 
    <div class="grid-item">...</div> 
    <div class="grid-item">...</div> 
</div> 

のjQuery：

$('.grid').masonry({ 
    // options 
    itemSelector: '.grid-item', 
    columnWidth: 200 
}); 

Answer 2

これを実現する最も簡単な方法は、別のdivで黄色と青色のボックスを折り返していることです。 レイアウトを大幅に変更しているメディアクエリがない限り動作します。別のやり方は、columを使ってflexboxを使うことです。

Answer 3

.wrapper{ 
 
width: 100%; 
 
padding: 15px; 
 
height:100%; 
 
} 
 

 
.floating_div{ 
 
    margin:10px; 
 
    float:left; 
 
    width: 45%; 
 
    height:300px; 
 
    display:inline-block; 
 
    vertical-align:top; 
 
} 
 

 
.m-t{ 
 
    margin-top:15px; 
 
} 
 

 
.blue_bg{ 
 
    background:blue; 
 
} 
 

 
.green_bg{ 
 
    background:green; 
 
} 
 

 
.yellow_bg{ 
 
    background:yellow; 
 
} 
 

 
.floating_div .inner_div{ 
 
    height:150px; 
 
}

<div class="wrapper"> 
 
    <div class="floating_div"> 
 
    <div class="inner_div blue_bg">Inner Div 1</div> 
 
    <div class="inner_div yellow_bg m-t"> Inner DIv 2</div> 
 
    </div> 
 
    <div class="floating_div green_bg "> 
 
    Left Div 2 
 
    </div> 
 
</div>

これはあなたが探しているのと同じですか？ここで

はJSFiddle

は、この情報がお役に立てば幸いです。

Answer 4

これはあなたのためにそれを行う必要があります。

https://jsfiddle.net/hncuyy6o/1/

`<div class="wrapper"> 
    <div class="hai"> 
    <div class="one"></div>  
    <div class="three"></div> 
    </div> 
    <div class="two"></div> 
</div>` 

CSS：

.wrapper{ 

width: 100%; 
padding: 15px; 
} 

.hai{ 
    display: inline-block; 
} 
.one{ 
    vertical-align: top; 
    width: 200px; 
    height: 300px; 
    background-color: blue; 
    display: inline-block; 
} 

.two{ 
    vertical-align: top; 
    width: 200px; 
    height: 400px; 
    background-color: red; 
    display: inline-block; 
} 

.three{ 
    width: 200px; 
    height: 300px; 
    background-color: yellow; 
    display: block; 
    position: absolute; 
} 

に役立ちます希望を。