Отрегулируйте высоту div в зависимости от его содержимого - PullRequest
Новая
       37

Отрегулируйте высоту div в зависимости от его содержимого

0 голосов
/ 05 декабря 2011

Я работаю над созданием мегаменю.У меня проблемы, когда устраивают 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 ?

Ответы [ 2 ]

2 голосов
/ 06 декабря 2011

Я отвечаю на свой вопрос:

(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

1 голос
/ 05 декабря 2011

Я бы убрал пробелы, да. С другой стороны, вам понадобится несколько оберточных div для каждой имеющейся у вас строки.

...