使用 html 将文本 div 内联与相邻 div 的底部对齐答案

【问题标题】：Using html to align a text div inline with the bottom of an adjaecent div使用 html 将文本 div 内联与相邻 div 的底部对齐
【发布时间】：2016-03-22 14:27:17
【问题描述】：

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

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

目前这很好。徽标出现在左侧，链接出现在最右侧。但是我唯一的问题是文本在徽标 div 的顶部对齐；我希望它与徽标 div 的底部对齐，以便网页位于末尾。

我在文本 div 中尝试了“align=bottom”，但这似乎不起作用

编辑以显示问题：

当前设置：

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

Preferred set up:

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

【问题讨论】：

我不太明白您想要达到的目标？您能否指定或添加您的目标的图片？
CSS Vertical align does not work with float的可能重复
我已编辑以更好地表示问题
我应该注意我无法编辑 CSS

标签： html

【解决方案1】：

.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;
  }

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

【讨论】：

我只能使用 html，但将这些值传输到 html 是一种享受。谢谢

【解决方案2】：

一个可能的解决方案是使用 flexbox 和 align-itemsproperty。欲了解更多信息，您可以查看http://philipwalton.github.io/solved-by-flexbox/demos/grids/

.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;
}

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

【讨论】：