一個網頁佈局

我建立了一個頁面，但是我遇到了一些佈局相關的問題，我不能讓div自動調整它的大小（acutally高度）。請參閱下面的標記：一個網頁佈局

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
     <title>Link one</title> 

     <style type="text/css"> 
      div#middle{ 
       margin-top: 5px; 
       margin-bottom: 5px; 
      } 
     </style> 
    </head> 

    <body> 
     <div style="background-color: gray;border: solid 1px red" id="top"> 
      <h1>Top<h1> 
     </div> 

     <div style="border: solid 1px blue;min-height: 200px" id="middle"> 
      <div id="leftmenu" style="float: left;background-color:gray;width: 190px"> 
       <ul> 
        <li><a href=''>Link One</a></li> 
        <li><a href=''>Link Two</a></li> 
       <ul> 
      </div> 

      <div id="content" style="background-color: black;margin-left: 200px"> 
       I am in Link One 
      </div> 
     </div> 

     <div style="background-color: gray" id="foot"> 
      <hr/> 
      <p>Copyright xxx</p> 
     </div> 
    </body> 
</html>

注意其ID爲「中」，我必須手動設置其高度的股利，如果不是它下面（DIV ID爲「腳」）的DIV不會顯示在其下方。足部div將與「中間」div相同，只需移除「中間」div的「min-height：200px」即可進行測試。

由於內容不確定，所以無法手動設置其大小，我只想將中間div的高度設置爲「leftmenu」或「content」的較大高度。

任何想法？

----------------------------------------- alt text

它不擴大，

來源

2011-01-07 hguser

我想這只是出於實驗的原因，但您將刪除內聯CSS並將其放置在單獨的文件中，對。 – markus 2011-01-07 14:04:47

您還沒有清除浮動。加入這一行<div style="clear:both;"></div>下面的DIV id爲內容

<div style="border: solid 1px blue;min-height: 200px" id="middle"> 
      <div id="leftmenu" style="float: left;background-color:gray;width: 190px"> 
       <ul> 
        <li><a href=''>Link One</a></li> 
        <li><a href=''>Link Two</a></li> 
       <ul> 
      </div> 

      <div id="content" style="background-color: black;margin-left: 200px"> 
       I am in Link One 
      </div> 
      <div style="clear:both;"></div> 
     </div>

它確實是因爲頁面的流量這一點。流程是頁面上元素的順序。因此，在您的示例中，您的li元素會一個接一個地放置，因此第一個元素將出現在頁面上的第二個元素之前。這同樣適用於所有元素，<a>, <div>, <p>, <img>以及文本。當一個元素被浮動時，它被從流中取出，隨後的元素被推到旁邊;通過這種方式，您可以讓文本在圖像周圍流動或鏈接排列在一起。

不幸的是，當你漂浮在另一個元素中的所有元素的父元素（#middle）（如你與#leftmenu和#content完成的）行爲，如果它包含什麼，因爲它在流量無子元素，並充當如果它是基本上空着。通過添加一個清除<div>，我們在流程正下方創建一個子元素，然後父元素可以計算正確的高度。

我希望我解釋得很好。

來源

2011-01-07 14:02:30

使用背景圖像來僞造相等的列高度。

檢查這篇文章：

http://www.alistapart.com/articles/fauxcolumns/

對於清除使用這個類：

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
}

這樣

<div style="border: solid 1px blue;min-height: 200px" id="middle" class="clearfix">

來源

2011-01-07 13:49:13 Diablo

的float:left導致問題。您需要在中間插入清除元素。

如

<div style="border: solid 1px blue;min-height: 200px" id="middle"> 
     <div id="leftmenu" style="float: left;background-color:gray;width: 190px"> 
      <ul> 
       <li><a href=''>Link One</a></li> 
       <li><a href=''>Link Two</a></li> 
      <ul> 
     </div> 

     <div id="content" style="background-color: black;margin-left: 200px"> 
      I am in Link One 
     </div> 
     <div style="clear:both"></div> 
    </div>

JS Fiddle demo

來源

2011-01-07 14:00:06

謝謝，你的答案和Matt Asbury的一樣。 IT的作品，謝謝。 – hguser 2011-01-07 14:07:39

@hguser啊是的，但我毆打他:) – 2011-01-07 14:10:40

一個網頁佈局

回答

相關問題