Question

HTML

<div class="container">
    <div class="left">
        <div class="panel">My Panel</div>
    </div>
    <div class="right"></div>
</div>

CSS

.container {
    background-color: #000;
    margin: 130px auto;
    min-height: 320px;
    width: 940px;
    overflow: auto;
    padding: 0px 10px;
 }

.left {
    width: 600px;
    margin-right: 20px;
    float: left;
 }

.right {
    width: 320px;
    height: 100% auto; 
    overflow: auto;
    background-color: blue;
    float: right;
}

.panel {
    background-color: red;
}

问题：

如何在div.right下添加另一个div？我想要放在.right下的div为.under_right，CSS为：

.under_right {
    width: 320px;
    height: 100% auto; 
    overflow: auto;
    background-color: gold;
}

Answer 1

<强> Working DEMO

在html中添加div，如下所示：

<div class="container">
        <div class="left">
            <div class="panel">My Panel</div>
        </div>
       <div class="right">Blue</div>
       <div class="new_div">New</div>      <-- Added this new div here 
</div>

并使用此CSS：

.new_div { background-color: white; width:320px; float: right;  }

Answer 2

<div class="container">
    <div class="left">
        <div class="panel">My Panel</div>
    </div>
    <div class="right"></div>
    <div class="underright"></div>
</div>

.under_right {
    width: 320px;
    height: 100% auto; 
    overflow: auto;
    background-color: gold;
    float: right;
}

只要div .underright位于div .right之下，浮动将遵循该结构。

编辑快速说明，也许添加display：block;对css有帮助，特别是如果你改变外容器的大小。

Answer 3

http://jsfiddle.net/daQ22/2/

添加：

clear:both;
float:right;

to under_right

Answer 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<style type="text/css">
.container {
    background-color: #000;
    margin: 130px auto;
    min-height: 320px;
    width: 940px;
    overflow: auto;
    padding: 0px 10px;
 }

.left {
    width: 600px;
    margin-right: 20px;
    float: left;
 }

.right {
    width: 320px;
    height: 100% auto; 
    overflow: auto;
    background-color: blue;
    float: right;
}
.under_right {
    width: 320px;
    height: 100% auto; 
    overflow: auto;
    margin-top:30px;
    background-color: gold;
}

.panel {
    background-color: red;
}
</style>
</head>
<body>
<div class="container">
    <div class="left">
        <div class="panel">My Panel</div>
    </div>
    <div class="right">
        <div class="under_right">It is under right.</div>
    </div>
</div>
</body>
</html>

如何在右浮动div下添加div？

问题：

4 个答案: