0

我有一系列带有标签和值的行，如下所示：

<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 ，然后左列不会向右推，但前提是我在右列上设置了显式宽度，这是不切实际的，因为它们可能包含从小到大的数字。

我没有与 jsfiddle 中的 div 上使用的 display:table 和 display:table-cell 结婚，所以如果没有它就可以实现所需的外观，那么我全力以赴。我只在右列较大时使用 display:table 使左列变小（所以它比长内容与值重叠时要好），但如果没有分词，它就不起作用。

有任何想法吗？谢谢你的帮助！

4

2 回答 2

0

好吧，我确实得到了我想要的结果，除了我不得不切换 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;
}
于 2013-09-30T13:29:28.310 回答
-2

没有看最后一部分，抱歉。

你去 http://jsfiddle.net/YYUg6/1/

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

在这里，忘记上面的那些东西，这个呢？ http://jsfiddle.net/YYUg6/2/

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

于 2013-09-27T15:32:13.620 回答