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

Divs高度問題

回答

相關問題