CSS float left gap ausgabe

Question

ich benutze css float links, um automatisch auszurichten, aber wenn das letzte element etwas größer ist, geht es zur nächsten linie und macht große lücke, die seltsam aussieht. In mobilen Geräten möchte ich nur ein Element pro Zeile anzeigen und es tut aber wieder viele Leerzeichen. Kann ich Gerätebreite als Breite verwenden? für mobile ist es eine bessere Möglichkeit, dies zu tun, dass es wie pinterest Link sieht hier die Geige

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

Verwenden Sie ein CSS-Gitter, das Ihnen erlaubt, Spalten erstellen Es gibt eine ton of options für Gitter da draußen. Sie können auch den flexbox Layout-Modus verwenden, der genial ist. Wenn Sie ein einfacher anwendbares Werkzeug benötigen, können Sie eine Javascript-Bibliothek wie this oder this verwenden.