Question

人们！

布局页面标题时出现问题：/

我想在左侧放置徽标和标题，在右侧放置一些用户菜单/注销/消息。

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/

如何将这些文本移到底部？

Answer 1

使用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>

Answer 2

我会使用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>

将div放在div的底部

2 个答案: