將底部跨度放在底部的底部

有布點我頁頭一個問題：/

我想在左邊放置標誌和稱號，並在右邊一些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你認爲BC我想出了類名左右我複製了你的答案？不錯的假設，但不要讓我發笑。這是標準的柔性盒。當你發佈你的答案時，我必須一直在編碼它，所以請放下你的駿馬。爲什麼有人不希望他們的導航項目垂直居中？所有的標準 – 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

將底部跨度放在底部的底部

回答

相關問題