0

I do know the way a float behaves. The top of the next block needs to be higher than the bottom of the previous block when it has to go to the next line. I however, need it to float to the first block from the previous level.

Currently I am working with really large menus with lists of different sizes and I am getting a lot of whitespaces because of the floats. I need an easy, CSS/HTML based way to solve this.

If you're not sure what I'm talking about, here's a fiddle: http://jsfiddle.net/2EGbx/1/

As you can see, five is all the way to the bottom, leaving a lot of whitespace underneath one. I need five to go underneath one.

I have been googeling for some time now and I really can't find any solutions on this. I'd rather not have a javascript solution because I'm pretty sure CSS can handle it, but if it really is the only way, feel free to suggest.

4

4 回答 4

1

如果你不需要支持 IE，你可以使用：on.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;
于 2013-08-12T14:03:47.427 回答
0

如果网站没有响应，给每个元素一个固定的高度就可以了，即使它是响应的，我认为这是垂直的东西，并且大部分都保持不变。但是，如果您想以正确的方式进行操作，则根本不要使用浮点数，那不是您想要的...您需要通过使用display: inline-block;或内联或阻塞来解决...

于 2013-08-12T13:52:44.470 回答
0

我已经改变了你的标记和 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

于 2013-08-12T14:08:33.523 回答
0

我创建了自己的 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();

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

于 2013-08-13T08:29:59.653 回答