根據其內容調整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存有3和Lorem存有之間空的空間5; Lorem存有5和Lorem存有7？

來源

2011-12-05 Zulkhaery Basrul

如果你打倒使用一些jQuery，看看jQuery Masonry - 這對於這種類型的事情非常有用：http://masonry.desandro.com/ –

@ Zulkhaery - 如果你解決了它，你應該將代碼作爲解決方案發布，然後「接受」它作爲答案，以便這個問題不會「沒有答案」。 – ScottS

@斯科特：8小時後我不能喝酒「聲譽低於100的用戶在問問後8小時內無法回答自己的問題。」 –

我回答我的問題：

（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

來源

2011-12-06 11:41:47

我會刪除空格，是的。另一種方式，你需要爲每個「行」包裝div。

來源

2011-12-05 13:12:29

根據其內容調整div高度

回答

相關問題