表示用のフィールドと値の動的グループ

Question

データベースとWebServicesを結合した100％のWebアプリケーションがあります。データベースはラベルを参照し、値を表示するためにWebServicesで使用されるフィールド名を指定します。基本的には、最終HTML出力では、何が表示されるのか、ページに表示されるグループとフィールドの数はわかりません。

これは、クライアントが互いの上に積層されたグループは、グループ3、上記の例では、グループ1に近いものとの間にそれほどのスペースを持つべきではありません望んでいる私のJSFiddle Example

.group { 
    float: left; 
    margin: 20px; 
    min-width: 300px; 
    max-width: 400px; 
} 

ですそれら。実際には、ウィンドウを縮小したりモバイルで走ったりしているときと同じスペースが必要です。グループ間に20pxの間隔を持つようにしてください。私が使用しているLeft：Float：Leftは、クライアントが望んでいない前の行から一番高いグループの一番下に上端を揃えます。 Pure CSSでこれを行う方法はありますか、Angularやその他のJavascriptライブラリを使用する必要がありますか？私は純粋なCSSを使用することを好む。

Answer 1

私は自分の問題を解決しました。私は私を更新しました JSFiddle Example

@media only screen and (max-width: 740px) 
{ 
    .groupcol { 
    width: auto!important; 
    float: none!important; 
    border: 1px solid #fff; 
    margin: 0px!important; 
    margin-bottom: -10px!important; 
    } 
    .float { 
    float: none!important; 
    width: auto!important; 
    margin-bottom: 20px!important; 
    } 
} 

.table { 
    display: table; 
    border: 0px solid red; 
} 

.row { 
    display: table-row; 
} 

.col { 
    display: table-cell; 
    width: 720px; 
    min-width: 361px; 
    border: 0px solid blue; 
} 

.groupcol { 
    width: 340px; 
    float: left; 
    margin-right: 20px; 
} 

.float { 
    float: left; 
    width: 100%; 
} 

.group { 
    margin: 10px; 
    border: 1px solid #000; 
    min-width: 340px; 
    border-radius: 20px 20px 5px 5px; 
    box-shadow: 7px 7px 5px #ccc; 
} 

.title { 
    background-color: #808080; 
    color: #fff; 
    padding: 5px; 
    margin: 0px; 
    font-weight: bolder; 
    border-radius: 20px 20px 0px 0px; 
    text-align: center; 
} 

.footer { 
    background-color: #808080; 
    color: #fff; 
    padding: 5px; 
    margin: 0px; 
    line-height: 5px 
    border-radius: 0px 0px 5px 5px; 
} 

.data { 
    display: table; 
    border-top: 1px solid #000; 
    width: 100%; 
} 

.content { 
    display: table-row; 
    background-color: #fff; 
    color: #666; 
} 

.label { 
    white-space: nowrap; 
    font-weight: bold; 
    display: table-cell; 
    padding: 5px; 
    border-right: .5px dotted #ddd; 
    border-bottom: .5px solid #ddd; 
} 

.value { 
    display: table-cell; 
    padding: 5px; 
    overflow: hidden; 
    border-bottom: .5px solid #ddd; 
}