0

以下のように2つのdiv（ロゴと管理者）があるとします。

<body id="main_body">
<div id="logo_area">
<div id="logo">
  <image></image>
</div>
<div id="admin">
  LOG IN
</div>
</div>
</body>

管理者が次にdivの下部に配置するようにしたい場合。つまり、次のようになります。

--------------------------------------------
IMAGE
                                  LOG IN
--------------------------------------------

次のCSSを試しましたが、機能しません。

#main_body {
margin:0px;
}

#logo_area {
background-color: #086A87;
height: 60px;
}

#logo {
padding-left:10px;
float:left;
width:80%;
margin-left:auto;
margin-right:auto;
}

#admin {
bottom:0px;
}

誰かがここで光を当てることができますか？

ありがとう

4

3 に答える 3

2

に追加position:relativeする#logo_area_position:absolute#admin

#logo_area {
background-color: #086A87;
height: 60px; position:relative
}
#admin {
bottom:0; position:absolute; right:0
}

デモ

絶対位置と相対位置の詳しい解説はこちら

于 2013-01-24T06:18:27.200 に答える
0 
<header>
<div id="image">Some image here...</div>
<div class="clear"></div>
<div id="menu">
    <ul>
        <li>Login</li>
        <li>Sign Up</li>
    </ul>
</div>


#image {
float:left;}

.clear {
clear:both;}


#menu {
float:right;}

#menu ul li {
display:inline;
margin:0px 10px 0px 0px}

デモ

于 2013-01-24T06:44:42.693 に答える
0

float:left; を追加するだけです。ログインCSSに

#main_body {
margin:0px;
}

#logo_area {
background-color: #086A87;
height: 60px;
}

#logo {
padding-left:10px;
float:left;
width:80%;
margin-left:auto;
margin-right:auto;
}

#admin {
bottom:0px;
float:left;
}

ボックスと内部のすべての div の正しい寸法を考慮して、幅を 80% に設定します。ロゴの場合、残りは 20% 以下でログイン用です。これも定義する必要があります。

#admin{
 width: 20%;
}

デモ: http://jsfiddle.net/CrcGU/

私は誤解しているようです: float:left; を削除するだけです。#logo から float:right; を追加します。ログインへ

#logo {
padding-left:10px;
width:80%;
margin-left:auto;
margin-right:auto;
background-color:navy;
}

#admin {
bottom:0px;
float:right;
width:15%;
}

デモ: http://jsfiddle.net/V6H5x/

于 2013-01-24T06:23:28.080 に答える