html - 如果下面没有空间，则浮动 div

Question

所以假设我有3个div。我希望它们堆叠成列，彼此相邻。在第一列中，前两个 div 适合。现在我想让第三个放在第一个旁边，因为第三个没有空间放在前两个下面。如何才能做到这一点？

Answer 1

目前，唯一可靠的方法是使用 CSS3 的列。请参阅此处以获取参考：http ://www.css3.info/preview/multi-column-layout/

这尚未得到广泛支持（尤其是 IE），因此您可能需要 jQuery 插件 Columnizer 来添加更多支持： http ://dotmac.rationalmind.net/2011/03/cross-browser-multi-columns-with- jquery-and-css3/

Answer 2

CSS：

  #wrapper{
      width:960px;
      margin:0 auto;
    }
    .mydivs{
    float:left;
    }
    .cl{
       clear:left;
    } 

标记：

 <div id='wrapper'>
    <div class='mydivs'></div>

    <div class='mydivs'></div>

    <div class='mydivs'></div>
    <div class='cl'></div>
</div>

float:left你所有的 div，它们将按你想要的位置放置。（如果没有剩余空间，则左对齐并在下一行）