0

假设我有如下两个 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

只需添加 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，你设置 width:80%; 那么，对于 logo，剩余的 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 回答
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 回答