0

我试图实现这一目标

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

}

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

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

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

4

6 回答 6

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

代码示例

于 2012-11-08T08:55:28.837 回答
0

Most confusing job in web designing for me is to align divs like these but if you understand every aspect of float, display and some other properties important for layout designing then you can easily create such layouts.

Check this fiddle for an example http://jsfiddle.net/DeepakKamat/xQKXz/1/

The HTML : 

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

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

I hope this helps you.

于 2012-11-08T09:04:08.613 回答
0

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

检查此演示

更新了演示

于 2012-11-08T08:47:16.477 回答
0

你可以这样做：

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

演示

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

于 2012-11-08T08:50:03.550 回答
0

诀窍是要意识到你需要更多的 div 而不仅仅是这三个。也就是说，divs 2 和 3 需要有一个父级是 1 的兄弟姐妹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;
}
于 2012-11-08T08:52:00.307 回答
0 
#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 的宽度。

于 2012-11-08T09:01:07.573 回答