0

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 div.right？我要放置的 div.right将是.under_right，CSS 是：

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

4 回答 4

2

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

添加：

clear:both;
float:right;

右下角

于 2013-05-20T17:39:48.653 回答
2

工作演示

div像这样在 html 中添加：

<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;  }
于 2013-05-20T16:56:16.053 回答
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 会有所帮助，特别是如果您更改外部容器的大小。

于 2013-05-20T16:57:11.697 回答
1 
<!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>
于 2013-05-20T17:44:57.130 回答