Javascript div标签的css样式

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

CSS

HTML

//btn

类似于：

.header {
    position: relative;
}

. login  {
    position: absolute;
    bottom: 0;
    right: 0;
}

---

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

.header{
位置：相对位置；
背景：红色；
宽度：100%；
高度：100px；
边际下限：300px
}
.登录{
保证金：0；
填充：0px 0px 0；
文本对齐：右对齐；
宽度：40%；
位置：绝对位置；
右：0；
底部：0；
背景：蓝色；
}

//btn

使用

位置：绝对

实现此目的

HTML

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

旁注：请记住，

class

仅用于页面上放置多次的对象。如果对象仅在页面上放置一次，例如：

标题

，

徽标

，则应使用

id

而不是

类

。这最大的原因是因为

id

的特异性得分高于类。因此，您可以为所有更受控制的对象提供样式。

html:

<div class="header"> 
    <div class="ribbon"></div>
    <div class="logo"></div>
    <div class="login">
         <input type='button' value='right click' class='right-button'>
    </div>   
</div>

---

您可以使用以下内容：

CSS

HTML

//btn

尝试标题

位置：相对
和div登录/btn
位置：绝对；底部：0；右：0无需进行硬统计：位置：相对/位置：绝对；底部：0；右：0；你必须做的是：）在你问之前，你需要尝试更多的CSS选项。在这里学习似乎比我强我现在有两个按钮，它们都显示在同一个位置。然后，对于一个按钮更改：
bottom:0
到
bottom:40
或任何最适合的像素量。请查看我的JSFIDLE
<div class="header"> 
    <div class="ribbon">
    </div>
    <div class="logo">
    </div>
    <div class="login">
    //btn 
    </div>   
</div>

.header {
    width:100%;
    height:40px;
    outline:1px solid green;
    position:relative;   
}
.login{
    margin:0;
    padding:0px 0px 0 0;
    text-align:right;
    float:right;
    width:40%;
    outline:1px solid red;
    position:absolute;
    right:0;
    bottom:0;
}

<div class="header"> 
    <div class="ribbon"></div>
    <div class="logo"></div>
    <div class="login">
         <input type='button' value='right click' class='right-button'>
    </div>   
</div>

.login{
    margin:0;
    padding:0px 0px 0 0;
    text-align:right;
    float:right;
    width:40%;
    border: 1px red solid;
    height: 100%;
    position:relative;
}
.header{
    width: 100%;
    height: 100px;
    border: 1px green solid;
}
.right-button{
    position:absolute;
    bottom:0;
    right:0;
}

.login {
    margin:0 auto;
    padding:0
    text-align:right;
    float:right;
    width:40%;
}
.ribbon{
    float:left;
}
.logo{
    float:left;
}
.header {
    width:100%;
    height:auto; // or specify the max height of content
    outline:none
    position:relative;   
}

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