css style for div tag

Question

Я хочу отобразить кнопку в теге div справа. Я использую код, который я использовал для отображения содержимого div на правой стороне. Теперь у меня есть проблема с отображением тега div слева на левой стороне , Я хочу отобразить логин div тега на правой стороне. Я создал макет. Я хочу отобразить тег div входа, где я отмечен как красный, и назвал его btn div.I отметил текущий дисплей тега 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 для входа относительно нее.

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>