css - 如何在html中的div中安排3个div(左/中下/右上)？

Question

我正在努力实现这个目标

| Div     |                  |Div nav wrapper|
| logo    |                          
|container||  Div banar container            |
|         ||                                 |

我试过这个

 <div class="grid_12">
        <!--logo_container start here-->
        <div id="logo_container">
            <a href="#" id="logo"></a>

        </div>
            <div style="margin-top: 57px" class="grid_13">
            <div id="banar_container">
                <a href="#" id="banar"></a>
            </div>
            </div>

        <!--logo_container end here-->
        <div id="nav_wrapper">
            <ul id="nav">
                <li class="current_page_item"><a href="index.html">Home</a></li>
                <li><a href="about.html">My Profile</a></li>
                <li><a href="#">LogOut</a>

                </li>

            </ul>
        </div>
        <!--#nav_wrapper-->
    </div>

CSS 是

.grid_12 {
width:940px;
}
 .grid_13 {
width:851px;
 }
#logo_container{
    float:left;
    margin-top:20px;}

#logo{
    background:url(../images/bp.jpg) no-repeat left;
    width:100px;
    float:left;
    height:100px;
}
#banar_container
{
  float: left;
}

 #banar
 {
background:url(../images/Banner1.png) no-repeat left;
width: 851px;
float:left;
height: 71px;
 }

 #nav_wrapper {
position:relative;
display:inline;
float:right;
margin-right:25px;
margin-top:6px;

height:50px; 

}

它不是那样的..那我该怎么办？

这是我的完整代码...这是我正在尝试但未能做到...所以大家请看看这个并告诉我我的错

伙计们，我还在为此苦苦挣扎

Answer 1

我希望您会发现这个示例很有用。请注意，正如您所说，大小是固定的，但通过使用百分比相对于其父项仍然是可变的。

HTML

<div id="example">
    <div class="box01"></div>
    <div class="box02"></div>
    <div class="box03"></div>
</div>

CSS

#example {
    width: 400px;
    height: 400px;
}

div.box01 {
    float: left;
    width: 20%;
    height: 100%;
    background-color: #eee;
}

div.box02 {
    float: right;
    min-width: 100px;
    min-height: 100px;
    background-color: #ccc;
}

div.box03 {
    float: right;
    width: 80%;
    min-height: 100px;
    background-color: #aaa;
}​

Code Example