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

私にとってWebデザインで最も混乱する仕事は、このような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;}​

これがお役に立てば幸いです。

于 2012-11-08T09:04:08.613 に答える
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 の幅と高さの値がわからない。

このデモをチェック

更新されたデモ

于 2012-11-08T08:47:16.477 に答える
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 に答える
0

コツは、これら 3 つだけでなく、さらに多くの 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 に答える