2017-03-10 6 views
0

を左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.jpghttp://imgur.com/a/c6udM

アイブ氏は、フォーラムでこの質問に関するいくつかの記事を読んで、どちらも表示ようだ:テーブル、テーブルセルがなどが動作しているようですdivの幅と可変の高さの高められた配列です。また、masonry jsはすべてのdivに対して固定幅の値をとるため、適用できません。 salvatoreを使用するときは、各列が1行に1つの要素を含む必要があるため、div幅を交互に変更することはできません。

私は助けていただきありがとうございます。

+0

から選ぶべきたくさんある。 CSSの浮動小数点数は最後の「下」になるため、空白を埋めることはありません。別の方法として、フレックスボックスを使用して、行ごとに最低高さを設定する方法があります。 – TerraElise

答えて

0

パパリーを使用して、私は私の問題を解決しました。私は応答列でそれらを使用している - そこに:検索する用語は「石材」と私は固定幅を必要としないように使用してきたものである - 通常、これは一緒に嵌合片のためのJavaScriptライブラリーで行われ

http://packery.metafizzy.co/

関連する問題