Question

假设我有以下两个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;
}

请问有人在这里说清楚吗？

由于

Answer 1

将position:relative添加到#logo_area，将position:absolute添加到#admin

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

<强> DEMO

Here is the detailed explanation about absolute and relative position

Answer 2

只需添加浮动：左;登录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%;
}

DEMO：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%;
}

DEMO：http://jsfiddle.net/V6H5x/

Answer 3

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

<强> Demo

如何对齐div底部的文本

3 个答案: