HTMLスタックを垂直に浮動小数点にする

さまざまな高さのDIVを積み重ねるときに、次の行に分割するときに空き領域が多くなります。グループ1とグループ5を添付画像に追加します。私はインラインブロックを試みました：浮動：左、ディスプレイ：フレックス;フレックスラップ：ラップ;他のほとんどのプロパティとそれを把握することはできません。私はJQueryベースのソリューションを推薦する他の投稿を見る。 HTMLとCSSだけを使ってこれを達成することは可能ですか？HTMLスタックを垂直に浮動小数点にする

<html> 
<head> 
<style> 
    body { background: none repeat scroll 0 0 #EFEFEF; font-size:12px;font-family: "Courier New", "Courier", "monospace"; } 
    fieldset{border-color: grey;border-style: solid;} 
    div.groups{ width:300px;float:left;padding:5px 3px 5px 8px;} 
    div.container{ width:100%;} 
</style> 
</head> 
<body><br> 
<div class = "container"> 
    <div class = "groups"><fieldset> <legend><b>Group 1</b></legend> 
    <ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> 
    </ol></fieldset></div> 
    <div class = "groups"><fieldset> <legend><b>Group 2</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> 
    </ol></fieldset></div> 
    <div class = "groups"><fieldset> <legend><b>Group 3</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> 
    </ol></fieldset></div> 
    <div class = "groups"><fieldset> <legend><b>Group 4</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> 
    </ol></fieldset></div> 
    <div class = "groups"><fieldset> <legend><b>Group 5</b></legend><ol><li></li> <li></li> 
    </ol></fieldset></div> 
    <div class = "groups"><fieldset> <legend><b>Group 6</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> 
    </ol></fieldset></div> 
    <div class = "groups"><fieldset> <legend><b>Group 7</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> 
    </ol></fieldset></div> 
</div> 
</body> 
</html>

出典

2017-10-22 rsreji

-1

はい、それはCSS フレックスを使用可能です。チェックアウト要素間の垂直方向のギャップを埋めるこのguide

出典

2017-10-22 14:24:39

あなたはCSS列でそれを行うことができますしながら、JSやjQueryのソリューションの必要も、浮動小数点数では不可能ではありません。

*{margin:0;padding:0;box-sizing:border-box} 
 
html, body {width:100%} 
 

 
body {font-size:12px; font-family: "Courier New", "Courier", "monospace";} 
 
fieldset {border-color: grey; border-style: solid;} 
 
ol {list-style-position: inside;} 
 

 
.container { 
 
    column-count: 3; /* three columns per row */ 
 
    column-gap: 0; /* for horizontal gaps between groups */ 
 
} 
 

 
.container > .groups { 
 
    page-break-inside: avoid; 
 
    break-inside: avoid-column; 
 
    padding: 5px 8px; 
 
} 
 

 
@media screen and (max-width: 768px) { 
 
    .container { 
 
    column-count: 2; /* two columns per row */ 
 
    } 
 
} 
 

 
@media screen and (max-width: 480px) { 
 
    .container { 
 
    column-count: 1; /* one column per row */ 
 
    } 
 
}

<div class="container"> 
 
    <div class="groups"><fieldset><legend><b>Group 2</b></legend><ol><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> 
 
    </ol></fieldset></div> 
 
    <div class="groups"><fieldset><legend><b>Group 2</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> 
 
    </ol></fieldset></div> 
 
    <div class="groups"><fieldset><legend><b>Group 3</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> 
 
    </ol></fieldset></div> 
 
    <div class="groups"><fieldset><legend><b>Group 4</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> 
 
    </ol></fieldset></div> 
 
    <div class = "groups"><fieldset><legend><b>Group 5</b></legend><ol><li></li> <li></li> 
 
    </ol></fieldset></div> 
 
    <div class = "groups"><fieldset><legend><b>Group 6</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> 
 
    </ol></fieldset></div> 
 
    <div class = "groups"><fieldset><legend><b>Group 7</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> 
 
    </ol></fieldset></div> 
 
</div>

このソリューションは完全に反応し、ブラウザウィンドウのサイズを変更して実際の動作を確認します。

出典

2017-10-22 16:45:05 VXp

HTMLスタックを垂直に浮動小数点にする

答えて

関連する問題