代码之家 › 专栏 › 技术社区 › rkoller

每行三个缩进文本块中的第二个未对齐

css-float css

rkoller · 技术社区 · 10 年前

我有以下问题(钢笔可以在这里找到: http://codepen.io/rpkoller/pen/wJEhm?editors=110 ):

<div>
  <span class="ft-label">starts</span><span class="ft-labelinfo">Friday, 12.05.2014</span>
  <span class="ft-label">ends</span><span class="ft-labelinfo">Saturday,13.05.2014</span>
</div>

<div>
  <span class="ft-label">starts</span><span class="ft-labelinfoTRY">Friday, 12.05.2014</span><span class="ft-labelinfoTRY2">08:00-12:00</span>
  <span class="ft-label">ends</span><span class="ft-labelinfoTRY">Saturday,13.05.2014</span><span class="ft-labelinfoTRY2">09:00-14:00</span>
</div>

我想缩进文本块并对齐每个文本块。在第一个div块中,它工作正常。我浮动第一个“列”( .ft-label )开始和结束,然后在日期上设置一个边距( .ft-labelinfo ):

.ft-label {
    display:block;
    float:left;
    clear:both;
}

.ft-labelinfo {
  display:block;
  margin-left:5.5em;
  text-align:left;
}

当我相应地将该模式应用于第二个div时:

.ft-label {
    display:block;
    float:left;
    clear:both;
}

.ft-labelinfoTRY {
  display:block;
  margin-left:2.5em;
  text-align:left;
  float:left;
}

.ft-labelinfoTRY2 {
  display:block;
  text-align:left;
  margin-left:15em;
}

时代( .ft-labelinfoTRY2 )正确对齐,但日期( .ft-labelinfoTRY )因为它们必须是浮动的,所以它们的左边距指的是ft标签跨度的末端,长度不同,所以它们没有对齐。有没有一种方法可以在不使用网格解决方案或表格的情况下正确对齐所有元素,但要坚持我使用的模式?或者使用上述方法中的一种更好吗?