2017-09-09 3 views
0

ブラウザのウィンドウが小さくなるにつれて、ある位置に配置するdivのセットがあります。 divが互いの下に移動するにつれて、私は彼らに余分なスペースをせずに、前の行のdivの下に、左に向かって押し込むようにします。 divの高さは、コンテンツの内容に応じて異なる場合があります。ブラウザの幅を変更してdivを配置する

div { 
    display: inline-block; 
    float: left; 
    background-color: #fff; 
    width: 190px; 
    max-height: 450px; 
    margin: 10px; 
    border: 1px solid black; 
} 

視覚的に参照するために、これらの画像をチェックアウトしてください:

はここのdivのための私のCSSです。

narrow browser

narrower browser

+0

あなたは 'float'小道具を削除し、'垂直整列を設定する必要があります*:*私はそれをした – AvrilAlejandro

+0

を支えるtop'して、親のdivに列幅を追加しました。助けてくれてありがとう。 – LenaBena

答えて

0

ブートストラップ・グリッドは別のオプションであり、あなたが学ぶことができます:ラップは、それは多くのことを行うための最も簡単な方法ですが、これをチェックそのロジックをよりよく理解するためにどのように動作するのですか?

https://getbootstrap.com/docs/3.3/examples/grid/

関連する問題