Question

我想在右侧显示div标签中的按钮。我使用我用来显示右侧div内容的代码。现在我有一个问题，我的div标签显示在左侧。我想在右侧显示登录div标签。我创建了一个layout.I想要显示登录div标签，我标记为红色，并将其命名为btn div.I标记为蓝色div标签的当前显示。 enter image description here

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>

Answer 2

类似的东西：

.header {
    position: relative;
}

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

Answer 3

使用position:absolute来实现此目标。

<强> HTML

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

<强> CSS

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

JSFiddle demo

旁注：请注意，class仅用于在网页上放置多次的对象。如果对象仅在页面上放置一次，例如：header，logo，那么您应该使用id而不是class。最大的原因是因为id与类相比具有更高的特异性得分。因此，您可以为所有对象提供更加可控的样式。

Answer 4

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：

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

Jsfiddle Demo

Answer 5

您可以使用以下内容：

CSS

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

HTML

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

div标签的CSS样式

5 个答案: