div 하단에 div를 넣으십시오.

이 내 페이지 헤더를하고 설계하는 문제입니다 :/

내가 왼쪽의 로고와 제목을 배치 할, 그리고 오른쪽에서 usermenu/로그 아웃/메시지.

HTML :

<div class="banner"> 
    <img class="logo" src="data:image/gif;base64,R0lGODdhMgAyAPQAAL7ikLjfh+r12q3adNTstfr99u/45OTz0fT67c7prMPkmbPdftnuv8nno9/wyP///6jYawAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAMgAyAAAF5iAkjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJvAUGvIBK8Kg+AJAAtUCIAaxVUQLxEGBPgi7JcMg+GrBvKfBQQBgFVLpUFxnUIwYGAwMIbSRyJAkPIl9SJlQPXCJXIgICJQsFDgeDJV9VCFIEmBADlSZPAwwPUqiXJl8FjyQDUgEGmKQip2cplX0Qf7GStCcEjIuNrScNUMhSbG5wJJqkCFCIWAMCbXR2eChgalqSgIGYAwWHI4uhj2MPBnYnAwAAC3PZMQv3qU0AAwocSLCgwYMIEypcyLChw4cQl4QAADs="> 
    <div class="title">foo</div> 
    <div class="logout">bar</div> 
</div> 
<div class="content"> 
Some Content.. 
</div>

CSS :

.banner { 
height: 50px; 
background-color: #feefef; 
} 
.img, .title, .logout{ 
vertical-align: text-bottom; 
height:100%; 
} 
.logo {float: left;} 
.title {float:left;} 
.logout {float:right;}

https://jsfiddle.net/z9gervtm/3/

어떻게 내가 바닥에 그 텍스트를 이동하는 방법은 무엇입니까?

출처

2017-05-05 MegaChroniX

그래서 당신이 바닥에 정렬 된 항목을 원하는? –

나는 단지 인 flexbox를 사용하고 수레을 없애 것이다 단순화. div를 추가하여 왼쪽 및 오른쪽 배너 섹션을 만듭니다. 중앙 항목의 정렬이 좋은 보이게하기 :

.banner { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    height: 50px; 
 
    padding: 0 20px; 
 
    background-color: #feefef; 
 
} 
 

 
.left { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.right { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.left img, 
 
.right div:first-of-type { 
 
    margin-right: 10px; 
 
}

<div class="banner"> 
 
    <div class="left"> 
 
    <img class="logo" src="data:image/gif;base64,R0lGODdhMgAyAPQAAL7ikLjfh+r12q3adNTstfr99u/45OTz0fT67c7prMPkmbPdftnuv8nno9/wyP///6jYawAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAMgAyAAAF5iAkjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJvAUGvIBK8Kg+AJAAtUCIAaxVUQLxEGBPgi7JcMg+GrBvKfBQQBgFVLpUFxnUIwYGAwMIbSRyJAkPIl9SJlQPXCJXIgICJQsFDgeDJV9VCFIEmBADlSZPAwwPUqiXJl8FjyQDUgEGmKQip2cplX0Qf7GStCcEjIuNrScNUMhSbG5wJJqkCFCIWAMCbXR2eChgalqSgIGYAwWHI4uhj2MPBnYnAwAAC3PZMQv3qU0AAwocSLCgwYMIEypcyLChw4cQl4QAADs="> 
 
    <div class="title">Title</div> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="logout">Logout</div> 
 
    <div class="messages">Messages</div> 
 
    </div> 
 
</div> 
 
<div class="content"> 
 
    Some Content.. 
 
</div>

출처

2017-05-05 18:49:34 StefanBob

오른쪽에 여러 개의 전자 부품이있는 고급 솔루션을 좋아합니다 – MegaChroniX

@MegaChroniX 항목 아래쪽에 정렬 된 항목을 어떻게 요청합니까? '이 텍스트는 아래쪽으로 어떻게 이동합니까?',이 답변은하지 않습니다. 그. 다음에 당신이 원하는 것에 대해 더 구체적으로 말하십시오. 이 대답은 제 사본입니다. 5 분 후에 답을 얻었습니다. 부모님의 클래스 이름을 왼쪽으로 복사합니다. – dippas

@dippas 나는 당신의 대답을 복사 한 클래스 이름에 대해 왼쪽과 오른쪽으로 생각해 냈습니다. 좋은 가정이지만 나를 웃게하지 마라. 이것은 표준 flexbox입니다. 나는 당신이 대답을 게시하는 동안 그것을 코딩 했음에 틀림 없을 것이다. 그리고 왜 누군가가 그들의 nav 아이템을 수직으로 중심에두기를 원치 않을까요? 모든 표준 – StefanBob

사용 인 flexbox는 코드

.banner { 
 
    height: 50px; 
 
    background-color: #feefef; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: flex-end 
 
} 
 

 
.left { 
 
    display: flex; 
 
    align-items: flex-end 
 
}

<div class="banner"> 
 
    <div class="left"> 
 
    <img class="logo" src="data:image/gif;base64,R0lGODdhMgAyAPQAAL7ikLjfh+r12q3adNTstfr99u/45OTz0fT67c7prMPkmbPdftnuv8nno9/wyP///6jYawAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAMgAyAAAF5iAkjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJvAUGvIBK8Kg+AJAAtUCIAaxVUQLxEGBPgi7JcMg+GrBvKfBQQBgFVLpUFxnUIwYGAwMIbSRyJAkPIl9SJlQPXCJXIgICJQsFDgeDJV9VCFIEmBADlSZPAwwPUqiXJl8FjyQDUgEGmKQip2cplX0Qf7GStCcEjIuNrScNUMhSbG5wJJqkCFCIWAMCbXR2eChgalqSgIGYAwWHI4uhj2MPBnYnAwAAC3PZMQv3qU0AAwocSLCgwYMIEypcyLChw4cQl4QAADs="> 
 
    <div class="title">foo</div> 
 
    </div> 
 
    <div class="logout">bar</div> 
 
</div> 
 
<div class="content"> 
 
    Some Content.. 
 
</div>

출처

2017-05-05 18:44:04 dippas

감사합니다 잘 작동했습니다 – MegaChroniX

div 하단에 div를 넣으십시오.

답변

관련 문제