を左jfiddleかの例です:https://jsfiddle.net/mwL4L2a4/1/ソリューションはここ
.all {
margin: 0 auto;
width:60%;
}
.division {
float: left;
vertical-align:top;
}
.full {width : 100%; border:1px solid black;}
.half {width: 48%; border:1px solid black; }
.third {width : 30%; border:1px solid black;}
私はその親のな長さのフル、ハーフまたは第三のいずれかをカバーする別のdiv要素を持っています。 float leftを使用すると、すべてのdivが親の幅をカバーする傾向がありますが、div線の間にギャップがないようにしたいと考えています。私のdivの高さは変化しており、幅はクラスによって指定されています。
divを追加するときに規則的なパターンはありません。それは完全、半分、3分の2、3分の1のいずれかです。私は通常、行を完全に(3 * 1/3)、2 * 1/2,1/3 + 2/3などにするために、新しいものを作成するときに前のdiv幅のサイズを考慮に入れます。 )
例えば、高さが前の高さよりも高い場合、特定のクラスをdivに追加できます。 1つのdivが2つ前のdivなどの前に置かれている場合は、新しいクラスを追加してください。可能性のあるケースごとにjqueryを書くことで、それを動作させるために調べなければならないパスですか?ここで
が問題の視覚的な例である http://i.imgur.com/5xLCxjo.jpgと http://imgur.com/a/c6udM
アイブ氏は、フォーラムでこの質問に関するいくつかの記事を読んで、どちらも表示ようだ:テーブル、テーブルセルがなどが動作しているようですdivの幅と可変の高さの高められた配列です。また、masonry jsはすべてのdivに対して固定幅の値をとるため、適用できません。 salvatoreを使用するときは、各列が1行に1つの要素を含む必要があるため、div幅を交互に変更することはできません。
私は助けていただきありがとうございます。
から選ぶべきたくさんある。 CSSの浮動小数点数は最後の「下」になるため、空白を埋めることはありません。別の方法として、フレックスボックスを使用して、行ごとに最低高さを設定する方法があります。 – TerraElise