堆栈内存溢出
  繁体   English   中英

安排菜单项填补空白区域

[英]arrange menu items to fill up blank space

 原文  2012-11-19 17:01:19  2   1    javascript/ jquery/ html/ css/ jquery-isotope

问题描述

我希望我的菜单div根据图像1中的标记移动。第二个图像显示原始菜单，就像它现在看起来一样。 如何移动divs来填补空间。 我尝试使用isotope和wookmark但没有运气。 我无法让它发挥作用。 阿比帮忙有所作为。

HTML标记： 

<div id="megamenu1" class="megamenu">
        <div class="column">
            <h3>
                Web Development</h3>
            <ul>
               <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
                <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
                <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
                <li><a href="http://www.codingforums.com">Coding Forums</a></li>
                <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
                <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
                <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
                <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
                <li><a href="http://www.codingforums.com">Coding Forums</a></li>
                <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
                <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
                <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
                <li><a href="http://www.codingforums.com">Coding Forums</a></li>
                <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
            </ul>
        </div>
        <div class="column">
            <h3>
                News Related</h3>
            <ul>
                <li><a href="http://www.cnn.com/">CNN</a></li>
                <li><a href="http://www.msnbc.com">MSNBC</a></li>
                <li><a href="http://www.google.com">Google</a></li>
                <li><a href="http://news.bbc.co.uk">BBC News</a></li>
                <li><a href="http://www.google.com">Google</a></li>
                <li><a href="http://news.bbc.co.uk">BBC News</a></li>
                <li><a href="http://news.bbc.co.uk">BBC News</a></li>
                <li><a href="http://www.google.com">Google</a></li>
                <li><a href="http://news.bbc.co.uk">BBC News</a></li>
            </ul>
        </div>
        <div class="column">
            <h3>
                Technology</h3>
            <ul>

                <li><a href="http://www.codingforums.com">Coding Forums</a></li>
                <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
                <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
            </ul>
        </div>
        <div class="column">
            <h3>
                Web Development</h3>
            <ul>
               <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
                <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
                <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
                <li><a href="http://www.codingforums.com">Coding Forums</a></li>
                <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
                <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
                <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
                <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
                <li><a href="http://www.codingforums.com">Coding Forums</a></li>
                <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
                <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
                <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
            </ul>
        </div>
        <div class="column">
            <h3>
                News Related</h3>
            <ul>
                <li><a href="http://www.cnn.com/">CNN</a></li>
                <li><a href="http://www.msnbc.com">MSNBC</a></li>
                <li><a href="http://www.google.com">Google</a></li>
                <li><a href="http://news.bbc.co.uk">BBC News</a></li>
                <li><a href="http://news.bbc.co.uk">BBC News</a></li>
                <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
                <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
                <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
                <li><a href="http://www.codingforums.com">Coding Forums</a></li>
                <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
                <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
                <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
                <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
                <li><a href="http://www.codingforums.com">Coding Forums</a></li>
                <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
                <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
                <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
                  <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
                <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
                <li><a href="http://www.cssdrive.com">CSS Drive</a></li>

            </ul>
        </div>
        <div class="column">
            <h3>
                Technology</h3>
            <ul>
                <li><a href="http://www.news.com/">News.com</a></li>
                <li><a href="http://www.slashdot.com">SlashDot</a></li>
                <li><a href="http://www.digg.com">Digg</a></li>
                <li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
                <li><a href="http://www.news.com/">News.com</a></li>
                <li><a href="http://www.slashdot.com">SlashDot</a></li>
                <li><a href="http://www.digg.com">Digg</a></li>
                <li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
            </ul>
        </div>
        <div class="column">
            <h3>
                Technology</h3>
            <ul>
                <li><a href="http://www.news.com/">News.com</a></li>
                <li><a href="http://www.slashdot.com">SlashDot</a></li>
                <li><a href="http://www.digg.com">Digg</a></li>
                <li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
                <li><a href="http://www.news.com/">News.com</a></li>
                <li><a href="http://www.slashdot.com">SlashDot</a></li>
                <li><a href="http://www.digg.com">Digg</a></li>
                <li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
                <li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
            </ul>
        </div>
        <div class="column">
            <h3>
                Technology</h3>
            <ul>
                <li><a href="http://www.news.com/">News.com</a></li>
                <li><a href="http://www.slashdot.com">SlashDot</a></li>
            </ul>
        </div>
    </div>

JAVASCRIPT： 

<script type="text/javascript">
        jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")
</script>

CSS： 

.megamenu{
position: absolute;
display: none;
left: 0;
top: 0;
background: white;
border: 1px solid #f06b24;
border-width: 5px 1px;
padding: 10px;
font: normal 12px Verdana;
z-index: 100;
width:805px;

}

.megamenu .column{
float: left;
width: 180px; /*width of each menu column*/
margin-right: 5px;
}

.megamenu .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.megamenu .column ul li{
padding-bottom: 5px;
}

.megamenu .column h3{
background: #e0e0e0;
font: bold 13px Arial;
margin: 0 0 5px 0;
}

.megamenu .column ul li a{
text-decoration: none;
}

.megamenu .column ul li a:hover{
color: red;
}

这是菜单示例http://www.javascriptkit.com/script/script2/jkmegamenu.shtml的链接.js很长，所以我不会在这里粘贴.js文件链接 。 在此输入图像描述

TTT

1 个解决方案

解决方案1
 1 已采纳  2012-11-21 21:32:21

我不太确定您是否正在寻找自动填充空白（使用同位素）或想要订购某个订单的解决方案。

无论如何，两者同时是不可能的。 Isotope将尝试按照您放置的内容的顺序放置您的内容，但如果它可以填充一个小的间隙，发现距离更远的列将放置它。

使用同位素填充空白非常简单： http ： //jsfiddle.net/jaap/QfwJa/1/

按特定顺序拥有它们。

如果您希望以特定顺序显示内容，请先在html中按顺序放置。 我注意到你把每个“内容块”称为一列。 如果您希望您的内容按特定顺序排列，请首先创建4个实际列，这些列中的内容......

像这样：

http://codepen.io/anon/pen/ByCde 

<div id="megamenu1" class="megamenu">
<div class="column">
        <div class="content">
        <h3>
            Web Development</h3>
        <ul>
           <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
            <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
            <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
            <li><a href="http://www.codingforums.com">Coding Forums</a></li>
            <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
            <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
            <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
            <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
            <li><a href="http://www.codingforums.com">Coding Forums</a></li>
            <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
            <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
            <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
            <li><a href="http://www.codingforums.com">Coding Forums</a></li>
            <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
        </ul>
    </div>
      <div class="content">
        <h3>
            Technology</h3>
        <ul>
            <li><a href="http://www.news.com/">News.com</a></li>
            <li><a href="http://www.slashdot.com">SlashDot</a></li>
            <li><a href="http://www.digg.com">Digg</a></li>
            <li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
            <li><a href="http://www.news.com/">News.com</a></li>
            <li><a href="http://www.slashdot.com">SlashDot</a></li>
            <li><a href="http://www.digg.com">Digg</a></li>
            <li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
        </ul>
    </div>      
</div>

<div class="column">
            <div class="content">
        <h3>
            News Related</h3>
        <ul>
            <li><a href="http://www.cnn.com/">CNN</a></li>
            <li><a href="http://www.msnbc.com">MSNBC</a></li>
            <li><a href="http://www.google.com">Google</a></li>
            <li><a href="http://news.bbc.co.uk">BBC News</a></li>
            <li><a href="http://www.google.com">Google</a></li>
            <li><a href="http://news.bbc.co.uk">BBC News</a></li>
            <li><a href="http://news.bbc.co.uk">BBC News</a></li>
            <li><a href="http://www.google.com">Google</a></li>
            <li><a href="http://news.bbc.co.uk">BBC News</a></li>
        </ul>
    </div>
    <div class="content">
        <h3>
            Technology</h3>
        <ul>
            <li><a href="http://www.news.com/">News.com</a></li>
            <li><a href="http://www.slashdot.com">SlashDot</a></li>
            <li><a href="http://www.digg.com">Digg</a></li>
            <li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
            <li><a href="http://www.news.com/">News.com</a></li>
            <li><a href="http://www.slashdot.com">SlashDot</a></li>
            <li><a href="http://www.digg.com">Digg</a></li>
            <li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
            <li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
        </ul>
    </div>
</div>

<div class="column">
            <div class="content">
        <h3>
            Technology</h3>
        <ul>

            <li><a href="http://www.codingforums.com">Coding Forums</a></li>
            <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
            <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
        </ul>
    </div>
    <div class="content">
        <h3>
            News Related</h3>
        <ul>
            <li><a href="http://www.cnn.com/">CNN</a></li>
            <li><a href="http://www.msnbc.com">MSNBC</a></li>
            <li><a href="http://www.google.com">Google</a></li>
            <li><a href="http://news.bbc.co.uk">BBC News</a></li>
            <li><a href="http://news.bbc.co.uk">BBC News</a></li>
            <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
            <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
            <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
            <li><a href="http://www.codingforums.com">Coding Forums</a></li>
            <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
            <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
            <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
            <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
            <li><a href="http://www.codingforums.com">Coding Forums</a></li>
            <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
            <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
            <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
              <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
            <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
            <li><a href="http://www.cssdrive.com">CSS Drive</a></li>

        </ul>
    </div>
</div>

<div class="column">
    <div class="content">
        <h3>
            Web Development</h3>
        <ul>
           <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
            <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
            <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
            <li><a href="http://www.codingforums.com">Coding Forums</a></li>
            <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
            <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
            <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
            <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
            <li><a href="http://www.codingforums.com">Coding Forums</a></li>
            <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
            <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
            <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
        </ul>
    </div>



    <div class="content">
        <h3>
            Technology</h3>
        <ul>
            <li><a href="http://www.news.com/">News.com</a></li>
            <li><a href="http://www.slashdot.com">SlashDot</a></li>
        </ul>
    </div>
</div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在div中排列随机数的图像并填满所有空间 为什么导航菜单被切断？ 我们希望在菜单项后面填充空白 如何安排菜单项？ 如何扩展垂直菜单以填充语义UI中的整个空白列？ 如何使用HTML和CSS填充空白 Bootstrap 4中菜单项之间的空格 填写清单最多10个项目 div填充剩余空间（宽度） 如何调整div的大小以填充所有空间 菜单项未正确显示为大型菜单
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM