divの高さをコンテンツに基づいて調整します。

メガメニューの作成に取り組んでいます。私はdivを手配するときに問題があります。ここで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？

出典

2011-12-05 Zulkhaery Basrul

あなたがダウンしている場合いくつかのjQueryを使って、jQuery Masonryをチェックしてください。このタイプのものにはうってつけです：http://masonry.desandro.com/ –

@ Zulkhaery - あなたが解決したら、あなたのコードをソリューションとして投稿し、それを "受け入れる"べきです答えとして、この質問は「未回答」のままではありません。 – ScottS

@Scott：8時間後にはアンウォーウォールできません "100名未満の評判を持つユーザーは、質問後8時間は自分の質問に答えることができません。 –

私は自分の質問に答える：

（1）ハード方法：ここでは、各columのための新しい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>

jQuery Masonry

（2）簡単な方法を使用します

と、ここで出力：

enter image description here