求助：实现Logo左对齐、文本右下对齐的CSS同行布局

我来帮你搞定这个布局问题！先拆解下你遇到的核心问题：容器没居中、右侧文本没和Logo底部对齐，咱们一步步调整代码来实现预期效果。

问题分析 #

你原来的代码里有两个关键问题：

• vertical-align: bottom 对浮动元素不起作用——浮动元素脱离了常规文档流，这个属性只对行内/行内块元素生效
• 容器缺少水平居中的样式设置，没法实现“占页面90%且居中”的效果

最优解决方案：使用Flexbox布局 #

Flexbox是现代前端的首选布局方案，能轻松实现对齐和元素分布，代码更简洁可靠。修改后的代码如下：

CSS代码 #

.box2 {
  border-bottom: 5px solid #2ea9e0;
  max-width: 90%;
  margin: 0 auto; /* 让容器水平居中 */
  display: flex;
  justify-content: space-between; /* 左侧Logo和右侧文本分别靠两端 */
  align-items: flex-end; /* 让两个元素底部对齐 */
  padding-bottom: 8px; /* 可选：给下划线和内容之间留点间距，更贴近示例效果 */
}
.alignleft, .alignright {
  margin: 0; /* 清除p标签默认的上下外边距，避免影响对齐 */
}
img {
  width: 115px;
  height: 91px;
}

HTML代码 #

<div class="box2">
  <p class="alignleft"><img src="http://placehold.it/115x91" alt=""></p>
  <p class="alignright">Hello</p>
</div>

（不需要额外的<div style="clear: both"></div>了，Flex布局不会出现浮动塌陷问题）

浮动方案的替代调整（如果不想用Flex） #

如果你坚持用浮动布局，可以这样修改：

.box2 {
  border-bottom: 5px solid #2ea9e0;
  max-width: 90%;
  margin: 0 auto;
  overflow: hidden; /* 清除浮动，撑起容器高度 */
  padding-bottom: 8px;
}
.alignleft {
  float: left;
  margin: 0;
}
.alignright {
  float: right;
  margin: 0;
  line-height: 91px; /* 让文本行高等于Logo高度，实现底部对齐 */
}
img {
  width: 115px;
  height: 91px;
}

这样调整后，就能完全实现你要的四个效果：容器90%宽度居中、底部带下划线、Logo靠左对齐、文本靠右且底部对齐啦！

内容的提问来源于stack exchange，提问作者user1481153