動的な高さを持つ応答可能なブロック

短い質問：どのように1つのページに動的な高さのdivブロックの応答しやすいセットを集中させますか？以下の簡略化されたコードを参照してください。動的な高さを持つ応答可能なブロック

long：私は各ブロックに入る一連のデータを持っています。テーブル、グラフなどが含まれます。データはすべてmysqlによって駆動され、動的に一日ごとに変更されるため、これらのブロックの高さは決定されず、動的です。私は、ブロックがサンプルコードのように自動位置付けされるようにしたい。基本的に応答するページレイアウト。例：ピンクのテーブルは50ピクセルまたは5000ピクセルです。左側のフロートはクリティカルなので、必要に応じて複数のブロックを右側に積み重ねます。

ブロックがページの中央にあることが課題です。私はそれを理解することができないようです。

私はすべてを試して研究しています。 Flexはこのコンセプトをサポートしていないようです。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Test</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<style> 
.statusC, .statusC2 { 
    float: left; 
} 

</style> 

</head> 
<body> 

    <div class="statusC" style="height: 300px; width:500px; background-color:pink;">table</div> 

    <div class="statusC" style="height: 200px; width:500px; background-color:yellow;">progress</div> 
    <div class="statusC" style="height: 200px; width:500px; background-color:red;">clean</div> 
    <div class="statusC" style="height: 200px; width:500px; background-color:green;">stat</div> 
    <div class="statusC" style="height: 200px; width:500px; background-color:blue;">stat2</div> 

</body> 
</html>

出典

2016-08-01 Bill Aspromonte

ここで私は誤解されるかもしれませんが、縦または横に中心がありますか？ – LGSon

横一様左右 –

ブロックのラッパーを作成し、それを幅与える：

<div class="wrapper"> 
    <div class="statusC" style="height: 300px; width:500px; background-color:pink;">table</div> 
    <div class="statusC" style="height: 200px; width:500px; background-color:yellow;">progress</div> 
    <div class="statusC" style="height: 200px; width:500px; background-color:red;">clean</div> 
    <div class="statusC" style="height: 200px; width:500px; background-color:green;">stat</div> 
    <div class="statusC" style="height: 200px; width:500px; background-color:blue;">stat2</div> 
</div>

とCSS：

.wrapper { 
    margin: 0 auto; 
    position :relative; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
}

ブロックのフロートが許可されています。

https://jsfiddle.net/Marouen/0s2pwz5t/

出典

2016-08-01 21:48:08

マローエンは素早く対応してくれてありがとう。 floatを削除すると、問題が発生します。赤いクリーンブロックは黄色の進行中でなくなりました。これは私の挑戦でした...その機能は私のデザインの鍵です –

さて、わかりました。私はあなたがそれについてのメディアクエリが必要だと思う –

私は全くエレガントな方法で生産ではなく、しようとしているかを示しTOTAL HACKを見つけました。私はそこに良い解決策があることを願っています。幅を設定する必要がないソリューションが必要です。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Test</title> 
    <meta charset="utf-8"> 

<style> 
.statusContainer2 { 
    display: flex; 
    justify-content: center; 
} 

.statusContainer3 { 
} 
@media screen and (max-width: 1999px) { .statusContainer3 { width:1500px; } } 
@media screen and (max-width: 1499px) { .statusContainer3 { width:1000px; } } 
@media screen and (max-width: 999px) { .statusContainer3 { width:500px; } } 

.statusC { 
    float: left; 
} 
</style> 

</head> 
<body> 

<div class="statusContainer2" > 
<div class="statusContainer3" > 
    <div class="statusC" style="height: 300px; width:500px; background-color:pink;">table</div> 

    <div class="statusC" style="height: 200px; width:500px; background-color:yellow;">progress</div> 
    <div class="statusC" style="height: 200px; width:500px; background-color:red;">clean</div> 
    <div class="statusC" style="height: 200px; width:500px; background-color:green;">stat</div> 
    <div class="statusC" style="height: 200px; width:500px; background-color:blue;">stat2</div> 
</div> 
</div> 

</body> 
</html>

出典

2016-08-01 22:30:21

実際にあなたがしたようにする必要がある、あなたがスクリプトを使用して開始しない限り、他の方法はありません – LGSon

動的な高さを持つ応答可能なブロック

答えて

関連する問題