时间戳

首页 > 解决方案 > 嵌入式 span 元素中的 FlexBox 对齐问题

html - 嵌入式 span 元素中的 FlexBox 对齐问题

问题描述

我想与span右侧的日期时间元素对齐。我可以通过使用float属性来做到这一点，但是当我使用 flexbox 时，我不能这样做。

截屏：

截图图像

代码示例：

.flex-container {
  display: flex;
  flex-direction: row;
  width: 300px;
  margin: auto;
  padding: 10px;
  color: #fff;
  background: #777;
}

.flex-container .secondText {
  flex-grow: 1;
}
<div class="flex-container">
  <span class="firstText">some text here..<span class="secondText">13:30</span></span>
</div>

标签： htmlcssflexbox

解决方案

让两个<span>标签都是flex-items（使它们都是 的直接子级<div class="flex-container"></div>）。然后添加margin-left: auto;到要向右对齐的元素：

.flex-container {
  font-family: Arial, sans-serif;
  font-size: 12px;
  display: flex;
  justify-content:space-between; 
  width: 300px;
  margin: auto;
  padding: 10px;
  flex-wrap: wrap;
  color: #fff;
  background: #1E79AA;
}

.flex-container .firstText {
  line-height: 1.5;
  text-align: justify; /* optional; text-align: right works too */
}

/* To avoid overlaping of time and plain text!!! */
.flex-container .firstText:after {
  content: "";
  display: inline-block;
  width: 40px;
  line-height: 1.5em;
}

.flex-container .secondText {
  margin-left: auto;
  margin-top: -1.5em;
  height: 1.5em;
  line-height: 1.5em;
  width: 40px;
  background: #FF9500;
  text-align: center;
}
<div class="flex-container">
  <span class="firstText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa orci, euismod elementum porttitor tempor, laoreet ut mauris. Aliquam feuaiat quam ac sem feuaiat hendrerit hendrerit feuaiat evoid overlap. </span>
  <span class="secondText">23:30</span>
</div>

推荐阅读