一个网页布局

我建立了一个页面，但是我遇到了一些布局相关的问题，我不能让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

一个网页布局

回答

相关问题