我想将日期时间 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>
最佳答案
让 <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>
关于html - 嵌入 span 元素中的 FlexBox 对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54105054/