html - float div 内部 float div 的跨浏览器大小调整

Question

我想在一行数据上获得以下大小调整行为。 “abcd...”字段的大小可变，我希望在所有其他字段占用所需空间后尽可能多地显示它。 '0123...' 字段的大小可变，我希望在第一个字段之后完全显示。 “X”字段是已知的固定大小，我希望它固定在右侧。

| abcdefghijklmnopqrstuvwxyz | 0123456789 |     | X |
| abcdefghijklmnopqrstuvwxyz | 0123456789 |   | X |
| abcdefghijklmnopqrstuvwxyz | 0123456789 | | X |
| abcdefghijklmnopqrstuvwxyz | 0123456789 | X |
| abcdefghijklmnopqrstuvwx | 0123456789 | X |
| abcdefghijklmnopqrstuv | 0123456789 | X |
| abcdefghijklmnopqrst | 0123456789 | X |

我尝试过许多基于表格和 float div 的方法，但没有一种方法适用于所有浏览器。这是一种适用于 webkit 但不适用于其他方法的方法。

<div style="width:300px">
 <div style="float:right;width:20px">
  X
 </div>
 <div style="overflow:hidden">
  <div style="float:left">
   <div style="overflow:hidden">
    <div style="float:right">
     0123456789
    </div> 
    <div style="overflow:hidden;white-space:nowrap">
     abcdefghijklmnopqrstuvwxyz
    </div>
   </div>
  </div>
 </div> 
</div>

webkit 不需要一些嵌套的 div，但我试图让它在其他浏览器中工作。有人对如何解决这个问题有想法吗？谢谢!

Answer 1

我第一次看错了这个问题，由于我的答案与您要找的相去甚远，我决定用正确的解决方案完全替换它，以保持答案干净。无论如何，这应该可以解决问题:

CSS

.row {
    width: 300px;
}
.clear {
    clear: both;
}
.col_1 {
    float: left;
    position: relative;
    width: 280px;
    overflow: hidden;
}
.col_2 {
    position: absolute;
    background: #FFF;
    top: 0;
    right: 0;
    white-space: nowrap;
}
.col_3 {
    float: right;
    width: 20px;
}

HTML

<div class="row">
    <div class="col_1">
        abcdefghijklmnopqrstuvwxyz
        <div class="col_2">0123456789</div>
    </div>
    <div class="col_3">x</div>
    <div class="clear"></div> 
</div>
<!-- repeat as needed -->

唯一需要做的就是更改 .col_2 的背景，使其与 .col_1 的背景匹配，因为 .col_1 的额外内容隐藏在 .col_2 后面。

希望对您有所帮助!