css float left gap issue

Question

私はcss floatを使って自動的に整列させていますが、最後の要素が少し大きければ次の行に行き、奇妙に見える大きなギャップを作ります。モバイルデバイスでは、1行に1つの要素しか表示しませんが、それでも多くのスペースが必要です。デバイスの幅を幅として使用できますか？モバイル のためにここにPinterestの 直接リンク はフィドル

https://jsfiddle.net/hk80gj1m/1/

http://way2enjoy.com/celebrity-wallpapers

<div class="content_main_div div_100_per"><div id="timeline_content"><div><div class="content_box_main"> 
<div id="5" align="left" class="messagelove_box" style="width: 225px; float:left; height:310px;" ><div class="content_box_1"> 
     <div class="content_box_2z"><sup class="joke_icon"></sup></div> 
     <div class="content_box_3_title">deepika padukone best hd  <br>16 Wallpapers</div> 
     <div class="content_box_3_text"><a href="http://way2enjoy.com/deepika-padukone-best-hd-wallpapers-images-photos-pics" target="_blank"><img src="http://way2enjoy.com/themes/blue/thumbnail.php?file=http://way2enjoy.com/c/deepika-padukone-best-hd-wallpapers-images-photos-pics/Deepika-Padukone-best-hd-wallpapers.jpg&width=180&height=220" alt="deepika-padukone-best-hd-wallpapers-images-photos-pics" title="deepika-padukone-best-hd-wallpapers-images-photos-pics"/></a></div></div></div><div id="4" align="left" class="messagelove_box" style="width: 225px; float:left; height:310px;" ><div class="content_box_1"> 
     <div class="content_box_2z"><sup class="joke_icon"></sup></div> 
     <div class="content_box_3_title">cute britney spears  <br>18 Wallpapers</div> 
     <div class="content_box_3_text"><a href="http://way2enjoy.com/cute-britney-spears-wallpapers-images-photos-pics" target="_blank"><img src="http://way2enjoy.com/themes/blue/thumbnail.php?file=http://way2enjoy.com/c/cute-britney-spears-wallpapers-images-photos-pics/britney-spears.jpeg&width=180&height=220" alt="cute-britney-spears-wallpapers-images-photos-pics" title="cute-britney-spears-wallpapers-images-photos-pics"/></a></div></div></div><div id="3" align="left" class="messagelove_box" style="width: 225px; float:left; height:310px;" ><div class="content_box_1"> 
     <div class="content_box_2z"><sup class="joke_icon"></sup></div> 
     <div class="content_box_3_title">amitabh bachchan  <br>22 Wallpapers</div> 
     <div class="content_box_3_text"><a href="http://way2enjoy.com/amitabh-bachchan-wallpapers-images-photos-pics" target="_blank"><img src="http://way2enjoy.com/themes/blue/thumbnail.php?file=http://way2enjoy.com/c/amitabh-bachchan-wallpapers-images-photos-pics/deewar.jpg&width=180&height=220" alt="amitabh-bachchan-wallpapers-images-photos-pics" title="amitabh-bachchan-wallpapers-images-photos-pics"/></a></div></div></div><div id="2" align="left" class="messagelove_box" style="width: 225px; float:left; height:310px;" ><div class="content_box_1"> 
     <div class="content_box_2z"><sup class="joke_icon"></sup></div> 
     <div class="content_box_3_title">aamir khan  <br>21 Wallpapers</div> 
     <div class="content_box_3_text"><a href="http://way2enjoy.com/aamir-khan-wallpapers-images-photos-pics" target="_blank"><img src="http://way2enjoy.com/themes/blue/thumbnail.php?file=http://way2enjoy.com/c/aamir-khan-wallpapers-images-photos-pics/30548-aamir-1448536297-421-640x480.jpg&width=180&height=220" alt="aamir-khan-wallpapers-images-photos-pics" title="aamir-khan-wallpapers-images-photos-pics"/></a></div></div></div><div id="lastlove_loader"></div> 

Answer 1

は、あなたがすることを可能にするCSSグリッドを、使用しているように見えることをそうする任意のより良い方法はあり列を作成します。グリッドにはton of optionsがあります。また、素晴らしいレイアウトモードflexboxを使用することもできます。より簡単に適用できるツールが必要な場合は、thisやthisなどのjavascriptライブラリを使用できます。