Question

我有一系列带有标签和值的行：

<div class="row">
    <div class="rowName">thing 1</div>
    <div class="rowValue">325,000</div>
</div>
<div class="row">
    <div class="rowName">thing 2 that is longer</div>
    <div class="rowValue">4,000</div>
</div>
<div class="row">
    <div class="rowName">THING_3_NO_SPACE</div>
    <div class="rowValue">150</div>
</div>

这是一个jsfiddle，看看我到目前为止：http://jsfiddle.net/YYUg6/

我的问题是，如果标签是像THING_4那样冗长的单个单词，那么它会将值推出超出外容器的宽度。

将标签包装到下一行，甚至隐藏溢出都没关系，但我无法以合理的方式实现。我可以将它设置为使用table-layout：fixed然后左列不向右推，但只有在右列上设置显式宽度这是不实际的，因为它们可以包含从小到大的数字。

我没有嫁给显示器：table和display：用于jsfiddle中div的table-cell所以如果没有那个就可以实现所需的外观那么我就是为了它。当右列较大时，我只使用display：table来使左列更小（因此它比长内容与值重叠时更好），但如果没有单词中断，它就不起作用。

有什么想法吗？谢谢你的帮助！

Answer 1

好吧，我确实得到了这个我想要的方式，除了我不得不在HTML中切换“列”的顺序这一令人遗憾的事实，以便浮动按照我的预期运行。必须改变HTML结构以适应样式让我感到难过，但我想这就是现实世界的工作方式。

所以我改变了值和标签的顺序，将值浮动到右边，删除了所有display：table junk，它运行正常。这是一个更新的小提琴，可以看到它的实际效果：http://jsfiddle.net/YYUg6/10/

<div class="wrapper">
    <div class="right">325,000</div>
    <div class="left">thing 1</div>
</div>
<div class="wrapper">
    <div class="right">4,000</div>
    <div class="left">thing 2 that is longer</div>
</div>
<div class="wrapper">
    <div class="right">150</div>
    <div class="left">THING_3_NO_SPACE_IN_HERE</div>
</div>

.wrapper {
    width: 150px;    
}
.wrapper, .right, .left {
}
.right {
    float: right;
    text-align: right;
    padding-left: 10px;
}
.left {
    word-wrap: break-word;
    overflow: hidden;
}

Answer 2

没看完最后一部分，对不起。

你走了 http://jsfiddle.net/YYUg6/1/

display:tabel-cell;
vertical-align:middle;

在这里，忘了那些东西，这个怎么样？ http://jsfiddle.net/YYUg6/2/

另一个更新的想法http://jsfiddle.net/YYUg6/4/

固定宽度行，动态大小的列，具有中断包装

2 个答案: