0

我正在构建大型菜单。我在安排 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>

产生如下输出：

输出

这个菜单是动态创建的，所以我很难设置每个固定的高度div

是更好的方法如何删除 Lorem Ipsum 3和Lorem Ipsum 5之间的空白空间；Lorem Ipsum 5和Lorem Ipsum 7？

4

2 回答 2

2

我回答我自己的问题：

(1) Hard way：使用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>

这里是输出：

在此处输入图像描述

于 2011-12-06T11:41:47.197 回答
1

我会删除空格，是的。另一种方式，您需要为您拥有的每个“行”提供一些包装 div。

于 2011-12-05T13:12:29.317 回答