Question

我有一个徽标图片作为我正在编辑的网站页脚的一部分，可以在下面进行简化。

<div style="float:left"> the logo </div> <div style="float:right"> text links </div>

目前这很好。徽标显示在左侧，链接显示在最右侧。然而，我唯一的问题是文本在徽标div的顶部对齐;我希望它与徽标div的底部对齐，以便网页甚至在最后。

我试过＆＃34; align = bottom＆＃34;在文本div中，但似乎没有工作

编辑以显示问题：

当前设置：

!!!!!!!!!!!             <div 2>  *default top alignment*
!!<div 1>!!
!!!!!!!!!!!

Preferred set up:

!!!!!!!!!!!
!!<div 1>!!
!!!!!!!!!!!             <div2>  *Preferred align along the bottom"

Answer 1

＆＃13;

.parentDiv {
  position:relative;
  width:100%;
  height:100px;
  display:inline-block;
  }

.div1 {
  position:absolute;
  left:0px;
  bottom:0px;
  display:inline-block;
  width:100px;
  height:60px;
  background:#ddd;
  }

.div2 {
  position:absolute;
  right:0px;
  bottom:0px;
  display:inline-block;
  width:300px;
  height:50px;  
  background:#ccc;
  }

＆＃13;

<div class="parentDiv">
  <div class="div1">logo</div>
  <div class="div2">Some text aligned to bottom</div>
</div>

＆＃13;

Answer 2

可能的解决方案是使用flexbox和align-items属性。有关详细信息，请查看http://philipwalton.github.io/solved-by-flexbox/demos/grids/

＆＃13;

.grid {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: end;
}

.grid > div {
  padding: 10px;

  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.content {
  padding: 10px;
  background: #ccc;
}

＆＃13;

<div class="grid">
  <div class="left">
  <div class="content">Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in.</div>
  </div>
  <div class="right">
  <div class="content">DIV 2</div>
  </div>
</div>

＆＃13;

使用html将文本div与内联div的底部对齐

2 个答案: