Question

我确实知道浮动的行为方式。当必须转到下一行时，下一个块的顶部需要高于前一个块的底部。但是，我需要它从上一级浮动到第一个块。

目前我正在使用包含不同大小的列表的大型菜单，因为浮动因素，我得到了很多空白。我需要一种基于CSS / HTML的简单方法来解决这个问题。

如果你不确定我在说什么，这里有一个小提琴：http://jsfiddle.net/2EGbx/1/

正如您所看到的，five一直到底，在one下留下了很多空白。我需要five进入one。

我一直在googeling一段时间，我真的找不到任何解决方案。我宁愿没有javascript解决方案，因为我很确定CSS可以处理它，但如果它真的是唯一的方法，请随时提出建议。

Answer 1

如果您不需要支持IE，可以使用：.outer

-webkit-column-count: 3;  
-webkit-column-gap: 0px;
-moz-column-count: 3;     
-moz-column-gap: 0px; 
column-count: 3;
column-gap: 0px;

和.outer div：

display: inline-block;

Answer 2

如果网站没有响应，请将这些元素中的每一个都固定在一个固定的高度，即使它是响应的，也没关系，我认为这是垂直的东西，并且大部分都会保持不变。但是，如果你想以正确的方式做，不要使用浮动，这不是你想要的......你需要使用display: inline-block;或内联或阻止......

Answer 3

我已经改变了你的标记和css ......这些都是

<div class="outer">
 <div class="section">
   <div class="one">one<br/>one</div>
   <div class="five">five</div>
 </div>
   <div class="two">two<br/>two<br/>two<br/>two<br/>two</div>
   <div class="three">three<br/>three<br/>three</div>
   <div class="four">four<br/>four</div>
</div>

和css

.outer div {
width: 100px;
float:left;
padding-bottom: 20px;
}
.five{clear:both;}
.section{overflow:hidden;}

.outer {
width: 300px;
}

您的更新小提琴:: FIDDLE

Answer 4

我已经创建了自己的javascript解决方案。

此脚本创建4列并将列表项放在最小列中，然后继续到下一列。这是我找到的最有效的方式\

function reformatMenu()
{
    jQuery("#mainmenu td").each(function(index, elem)
    {
        jQuery("body").append('<div id="tempwrap"></div>');
        var $tempWrapper = jQuery("body").find("#tempwrap");
        var $menuwrapper = jQuery(this).find(".subwrapper");
        $tempWrapper.append('<div class="menu_wrapper"><ul></ul></div><div class="menu_wrapper"><ul></ul></div><div class="menu_wrapper"><ul></ul></div><div class="menu_wrapper"><ul></ul></div>');

        $menuwrapper.find("li.level-2").each(function(index, elem)
        {
            var $smallestWrapper = $tempWrapper.find(".menu_wrapper").first();
            $tempWrapper.find(".menu_wrapper").each(function(index, elem)
            {
                if(jQuery(this).height() < $smallestWrapper.height())
                {
                    $smallestWrapper = jQuery(this);
                }
            });
            jQuery(this).appendTo($smallestWrapper.children("ul"));
        });

        $tempWrapper.children().appendTo($menuwrapper);
    });
}
reformatMenu();

我确信它可能更有效率，但这是我最初的想法，而且效果很好。

CSS浮动的行为，浮动到第一个而不是前一个

4 个答案: