Question

我正在制作超级菜单。安排div时遇到麻烦。

这是HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Mega Menu Layout Test</title>
  <style>
  h1
  {
      margin:0px;
      font-size:16px;
  }

  .wrapper
  {
      position:absolute;
      width:400px;
      background:#CCC;
  }

  .category
  {
    float:left;
    margin:10px;
    width:180px;
  }

  .subcategory
  {

  }
  </style>
 </head>
 <body>
  <div class="wrapper" >
    <div class="category">
        <h1>Lorem Ipsum 1</h1>
    </div>
    <div class="category">
        <h1>Lorem Ipsum 2</h1>
    </div>
    <div class="category">
        <h1>Lorem Ipsum 3</h1>
        <div>
            <a href="#" style="display:block;">Dolor Sit Amet</a>
        </div>
    </div>
    <div class="category">
        <h1>Lorem Ipsum 4</h1>
        <div>
            <a href="#" style="display:block;">Dolor Sit Amet</a>
            <a href="#" style="display:block;">Consectetuer</a>
            <a href="#" style="display:block;">Adipiscing Elit</a>
        </div>
    </div>
    <div class="category">
        <h1>Lorem Ipsum 5</h1>
    </div>
    <div class="category">
        <h1>Lorem Ipsum 6</h1>
        <div>
            <a href="#" style="display:block;">Dolor Sit Amet</a>
            <a href="#" style="display:block;">Phasellus Congue</a>
            <a href="#" style="display:block;">Fringilla Accumsan</a>
            <a href="#" style="display:block;">Praesent aliquam</a>
            <a href="#" style="display:block;">Suspendisse non purus</a>
        </div>
    </div>
    <div class="category">
        <h1>Lorem Ipsum 7</h1>
        <div>
            <a href="#" style="display:block;">Dolor Sit Amet</a>
            <a href="#" style="display:block;">Consectetuer</a>
            <a href="#" style="display:block;">Adipiscing Elit</a>
        </div>
    </div>

    <div class="category">
        <h1>Lorem Ipsum 8</h1>
        <div>
            <a href="#" style="display:block;">Dolor Sit Amet</a>
            <a href="#" style="display:block;">Consectetuer</a>
            <a href="#" style="display:block;">Adipiscing Elit</a>
        </div>
    </div>
  </div>
 </body>
</html>

生成输出，如下所示：

Output

此菜单动态创建，因此很难设置每个div

的固定高度

~~更好的方式~~如何删除 Lorem Ipsum 3 和 Lorem Ipsum 5 之间的空白区域; Lorem Ipsum 5 和 Lorem Ipsum 7 ？

Answer 1

我回答我自己的问题：

（1）艰难的方法：使用jQuery Masonry

（2）简单方法：为每个列添加新的div，这里是HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Mega Menu Layout</title>
  <style>
  h1
  {
      margin:0px;
      font-size:16px;
  }

  .wrapper
  {
      position:absolute;
      width:400px;
      background:#CCC;
  }

  .category
  {
    float:left;
    margin:10px;
    width:90%;
  }

  .col
  {
      float:left;
      width:45%
  }
  </style>
 </head>
 <body>
  <div class="wrapper" >
        <div class="col">
                <div class="category">
                    <div>
                        <h1>Lorem Ipsum 1</h1>
                    </div>
                </div>
                <div class="category">
                    <div>
                        <h1>Lorem Ipsum 2</h1>
                    </div>
                </div>
                <div class="category">
                    <div>
                    <h1>Lorem Ipsum 3</h1>
                        <a href="#" style="display:block;">Dolor Sit Amet</a>
                    </div>
                </div>
                <div class="category">

                    <div>
                    <h1>Lorem Ipsum 4</h1>
                        <a href="#" style="display:block;">Dolor Sit Amet</a>
                        <a href="#" style="display:block;">Consectetuer</a>
                        <a href="#" style="display:block;">Adipiscing Elit</a>
                    </div>
                </div>
        </div>
        <div class="col">
                <div class="category">
                    <div>
                        <h1>Lorem Ipsum 5</h1>
                    </div>
                </div>
                <div class="category">
                    <div>
                    <h1>Lorem Ipsum 6</h1>
                        <a href="#" style="display:block;">Dolor Sit Amet</a>
                        <a href="#" style="display:block;">Phasellus Congue</a>
                        <a href="#" style="display:block;">Fringilla Accumsan</a>
                        <a href="#" style="display:block;">Praesent aliquam</a>
                        <a href="#" style="display:block;">Suspendisse non purus</a>
                    </div>
                </div>
                <div class="category">
                    <div>
                    <h1>Lorem Ipsum 7</h1>
                        <a href="#" style="display:block;">Dolor Sit Amet</a>
                        <a href="#" style="display:block;">Consectetuer</a>
                        <a href="#" style="display:block;">Adipiscing Elit</a>
                    </div>
                </div>
                <div class="category">
                    <div>
                    <h1>Lorem Ipsum 8</h1>
                        <a href="#" style="display:block;">Dolor Sit Amet</a>
                        <a href="#" style="display:block;">Consectetuer</a>
                        <a href="#" style="display:block;">Adipiscing Elit</a>
                    </div>
                </div>
        </div>
  </div>
 </body>
</html>

在这里输出：

enter image description here

Answer 2

我会删除空格，是的。另一方面，你需要为你拥有的每一行提供一些包装div。

根据内容调整div高度

2 个答案: