Question

如何获得div id =“left”的高度等于divs right_up和right_down？

    <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>

Answer 1

给我工作删除

margin-left: 80%;

来自div id =“right_down”

答案 1 :(得分：1)

Cheat.

答案 2 :(得分：0)

<强>已更新
- 修复：使用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>

Answer 2

<强>已更新
- 修复：使用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>

分高度问题

3 个答案: