css浮动左差距问题

-4

我使用css浮动左自动对齐，但如果最后一个元素略大一点，它会进入下一行，并产生很大的差距，看起来很奇怪。在移动设备中，我希望每行只显示一个元素，但它又保留了大量空间。我可以使用设备宽度作为宽度吗？移动有没有更好的方式来做到这一点，它看起来像Pinterest的直接链接这里是小提琴css浮动左差距问题

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>

来源

2016-11-06 Steeve

html和CSS在一个小提琴。 –

@ Dejan.S感谢您的评论。错误的代码没有被格式化，而是显示输出而不是html。 thx.added小提琴 – Steeve

使用CSS网格，它允许你创建列。那里有网格的ton of options。您也可以使用非常棒的flexbox布局模式。如果您需要更易于使用的工具，则可以使用JavaScript库，例如this或this。

来源

2016-11-06 19:19:59 yuvi

感谢您的信息。他们很棒。我不能使用单元库，因为广告显示是问题所在。否则它的哇类型。 – Steeve

css浮动左差距问题

回答

相关问题