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 
<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 の下にある限り、float はその構造に従います。

編集ちょっとしたメモ、おそらく display: block; を追加します。特に外側のコンテナのサイズを変更する場合は、css への変更が役立ちます。

于 2013-05-20T16:57:11.697 に答える
2

ワーキングデモ

div次のように htmlに a を追加します。

<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

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

追加：

clear:both;
float:right;

右下へ

于 2013-05-20T17:39:48.653 に答える
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 に答える