javascript - div标签的CSS样式

Question

我想在右侧的 div 标签中显示按钮。我使用用于在右侧显示 div 内容的代码。现在我的 div 标签显示在左侧时出现问题。我想在右侧显示登录 div 标签。我创建了一个布局。我想显示登录 div 标签，我将其标记为红色并将其命名为 btn div。我将 div 标签的当前显示标记为蓝色。

CSS

.login {
    margin:0;
    padding:0px 0px 0 0;
    text-align:right;
    float:right;
    width:40%;
}

HTML

<div class="header">
    <div class="ribbon"></div>
    <div class="logo"></div>
    <div class="login">//btn</div>
</div>

http://jsfiddle.net/mount/q4gxv7y2/

Answer 1

您可以为登录 div 使用绝对位置。为此，您还必须将标题位置设置为相对位置，以便使登录 div 相对于它定位。

Position absolute but relative to parent

.header{
   position:relative;
  background:red;
  width:100%;
  height:100px;
  margin-bottom:300px
}
.login{
    margin:0;
    padding:0px 0px 0 0;
    text-align:right;
    width:40%;
  
  position:absolute; 
  right:0;
  bottom:0;
  background:blue;
}

  <div class="header"> 
      <div class="ribbon">
      </div>
      <div class="logo">
      </div>
      <div class="login">
          //btn 
      </div>   
  </div>