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

Answer 2

不确定div宽度和高度的值是多少。

选中 DEMO

更新了 DEMO

Answer 3

您可以这样做：

    <div class="wrapper">
<div class="div1"></div><div class="div2"></div>
    <div class="div3"></div>
    </div>

和CSS：

div{border:solid 1px black;}
.div1 {
    width:50px;
    height:100px;
    float:left;
}

.div2 {    
    width:50px;
    height:18px;
    float:right;    
}
.div3 {
    width:250px;
    height:80px;
    float:left;
}
.wrapper{
    width:304px;
    border:none;
}

Demo

或者甚至可能是这样的：http://jsfiddle.net/4YX9H/1/ - div2的宽度和高度几乎可以是任何（它必须不比其父级宽）

Answer 4

诀窍是要意识到你需要更多的div而不仅仅是那三个。也就是说，div s 2和3需要父母是div的兄弟。尝试这样的事情：http://codepen.io/anon/pen/rLDqc

HTML：

<div id="left">This is your div on the left</div>
<div id="center">
  <div id="main">Hello, this is the third div</div>
  <div id="right">This is the div in the top right</div>
</div>
<div class="clear"></div>

CSS：

#left{
  width:30%;
  background:red;
  height:100px;
}
#center{
  width:70%;
  background:blue;
  height:100px;
}
#left, #center{
  float:left;
}
#right{
  position:relative; 
  display:inline; 
  float:right;
}
#main{
  margin-top: 57px;
  float: left;
}
.clear{
  clear:both;
}

Answer 5

#div1 {
width: 100%;
}

#div2, #div3, #div4 {
width: 33.3%;
float: left;
}

<div id="div1">
<div id="div2"></div><div id="div3"></div><div id="div4></div>
</div>

根据您的需要更改内部div的宽度。

Answer 6

对我来说，最令人困惑的网页设计工作是对齐这些div，但如果你了解浮动的各个方面，显示和其他一些对布局设计很重要的属性，那么你可以轻松创建这样的布局。

检查这个小提琴是否有例子 http://jsfiddle.net/DeepakKamat/xQKXz/1/

HTML：

<div class="container">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
</div>

CSS：

.container {backgroundcolor:yellow;display:block;width:400px;height:150px;padding:10px;}
.container div {margin:2px;color:white;}
#div1 {background-color:blue;width:20%;height:100%;border:2px dashed white;float:left;}
#div2 {background-color:green;display:inline-block;width:20%;height:70px;float:right;border:2px dashed white;}
#div3 {background-color:red;display:inline-block;width:76%;height:48%;border:2px dashed white;}

我希望这会对你有所帮助。

如何在html中安排div内的3个div（左/下中心/右上）？

6 个答案: