Divs高度问题

如何获得div id =“left”的高度与divs right_up和right_down一样高？Divs高度问题

<div style="width: 1050px;"> 
    <div id="left" style="width: 80%;height:80%;min-height: 80%;float: left; background-color: blueviolet;">a</div> 
    <div id="right_up" style="width: 20%;height:40%;min-height: 40%; float: left; background-color: yellow;"> 
     <p>some text using paragraphs</p><p>some text</p> 
     <ul> 
      <li>some text using lists</li> 
      <li>some text</li> 
     </ul> 
    </div> 
    <div id="right_down" style="width: 20%;min-height: 40%;height:40%; float: left; background-color: aqua; margin-left: 80%;"> 
     <p>some text using paragraphs</p><p>some text</p> 
     <ul> 
      <li>some text using lists</li> 
      <li>some text</li> 
     </ul> 
    </div> 
</div>

来源

2010-10-22 Jane

哦，内联CSS是杀害我 – Claudiu 2010-10-22 22:17:15

使用表，他们是最简单和最可靠的表格式布局。 – mojuba 2010-10-22 22:19:51

表是不必要的。这个布局非常简单，只需要一个容器div上的背景图像就可以给出高度相等的幻觉。 – ghoppe 2010-10-22 22:44:56

到我的作品从DIV ID = “right_down”

来源

2010-10-22 22:25:04 Dalen

firefox和chrome，现在我无法在IE上测试它，因为我在一台Ubuntu机器上 – Dalen 2010-10-22 22:47:23

我在Mozilla和Chrome上试过了你的解决方案。它不起作用。 – Jane 2010-10-22 22:48:20

它适用于另外2人，但不是吗？我猜你还有其他一些干扰的CSS。 – drudge 2010-10-22 23:04:03

修订
去除

margin-left: 80%;

- 修复：使用XHTML 1.0 Strict DTD
- 修正：背景填充到的高度div#wrapper
- 朗声道：不再调整到浏览器的高度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>div-height</title> 
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 

<style type="text/css"> 
    div#wrapper { 
     width: 1050px; 
     height: 80%; 
     min-height: 80%; 
     background-color: blueviolet; 
     overflow: auto; 
    } 
    div#left { 
     width: 80%; 
     float: left; 
    } 
    div#right_up, div#right_down { 
     width: 20%; 
     height: 40%; 
     min-height: 40%; 
     float: right; 
    } 
    div#right_up { 
     background-color: yellow; 
    } 
    div#right_down { 
     clear: right; 
     background-color: aqua; 
    } 
    div.clearfix { 
     clear: both; 
    } 
</style> 

</head> 
<body> 

<div id="wrapper"> 
    <div id="left">a</div> 
    <div id="right_up"> 
     <p>some text using paragraphs</p> 
     <p>some text</p> 
     <ul> 
      <li>some text using lists</li> 
      <li>some text</li> 
     </ul> 
    </div> 
    <div id="right_down"> 
     <p>some text using paragraphs</p> 
     <p>some text</p> 
     <ul> 
      <li>some text using lists</li> 
      <li>some text</li> 
     </ul> 
    </div> 
    <div class="clearfix"></div> 
</div> 

</body> 
</html>

来源

2010-10-22 22:29:56 drudge

这个.css如何让div＃离开全高？ – ghoppe 2010-10-22 22:46:57

@ghoppe：不知道，我做的唯一事情就是将CSS从HTML中分离出来。 – drudge 2010-10-22 22:50:02

这不起作用 – Jane 2010-10-22 22:52:58

Cheat.

来源

2010-10-22 22:35:45 ghoppe

回答

相关问题