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相對於其位置。

絕對位置，但相對於父位置

 .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演示

旁注：請記住， 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演示

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>