Question

我正在使用css float left来自动对齐但是如果最后一个元素稍微大一点它会进入下一行并产生看起来奇怪的大间隙。在移动设备中，我想每行只显示一个元素，它确实只会保留很多空格。我可以使用设备宽度作为宽度????移动有没有更好的方法，这看起来像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库。

css浮左差距问题

1 个答案: