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

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

html css

Html 如何在右浮动div下添加div？,html,css,Html,Css,HTML <div class="container"> <div class="left"> <div class="panel">My Panel</div> </div> <div class="right"></div> </div> 问题: 如何添加另一个可以放置在div.right下的div？我想放在.right下的div将是。在_right下，C

HTML

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

问题: 如何添加另一个可以放置在

div.right

下的div？我想放在

.right

下的div将是

。在_right

下，CSS是：

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

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

只要右下方的div.right位于右下方，浮动将遵循该结构

编辑只是一个简短的注释，可能会添加display:block；使用css会有所帮助，特别是当您更改外部容器的大小时

加：

到右下方


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

.集装箱{
背景色：#000；
利润率：130px自动；
最小高度：320px；
宽度：940px；
溢出：自动；
填充：0px 10px；
}
.左{
宽度：600px；
右边距：20px；
浮动：左；
}
.对{
宽度：320px；
高度：100%自动；
溢出：自动；
背景颜色：蓝色；
浮动：对；
}
.右下角{
宽度：320px；
高度：100%自动；
溢出：自动；
边缘顶部：30px；
背景颜色：金色；
}
.小组{
背景色：红色；
}
我的小组
它在右边。

您想要什么？你能给我一张截图吗？@NOX看到了吗？我需要金色的div正好在蓝色的div下面。我看到了小提琴，我想让你想象一下你想要的最后一件东西。也许在Photoshop或Paint中你可以做到这一点。在这种情况下，我可以为您编写正确的HTML/CSS代码。您在说什么黄色div？我的答案中的Fiddle会给您提供所需的结果，不是吗？您提供的那一个不起作用，因此我创建了上面的Fiddle来告诉您哪里出了问题。我需要黄色的div显示在蓝色的正下方。用你的代码它不工作。

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

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

clear:both;
float:right;

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