2

我有两个并排的div。第一个包含一个可能相当长的文本字段，另一个包含一个很短的数字。

我需要第一个 div 占用所有可用空间，而不需要拉伸父级并在必要时进行裁剪。Ant 它应该考虑第二个 div 的宽度。所以如果文本的长度很短，那么两个div应该并排，但是如果文本很长，那么第一个会被剪掉，第二个会被一直推到右边。

这是大致的表格布局：

<div id="container">
    <div id="row">
        <span id="text">Short text</span><span id="value">123</span>
    </div>

    <div id="row">
        <span id="text">A bit longer text</span><span id="value">555</span>
    </div>

    <div id="row">
        <span id="text">A very very very very very very very very long text</span><span id="value">555</span>
    </div>
</div>

以及相应的 CSS：

#container {
    border: 1px solid #000000;
    width: 300px;
}

#row {
    display: inline-block;
    border: 1px solid #000077;
    width: 100%;
    clear: both;
}

#text {
    display: inline-block;
    border: 1px solid #007700;
}

#value {
    display: inline-block;
    border: 1px solid #770000;
}

这是一个jsfiddle模板，说明了我需要什么。一个很长的文本行应该被剪掉，555应该放在它旁边的同一行，这样整个结构就适合指定的300px（数字是任意的，它将由现实生活中的其他元素定义，事先不知道） ）。

4

3 回答 3

1

您可能可以使用display: table（小提琴）：

#container {
    display: table;
}

#row {
    display: table-row;
}

#text {
    display: table-cell;
}

#value {
    display: table-cell;
}
于 2013-03-18T21:39:07.967 回答
0

演示小提琴

#text {
    display: inline-block;
    border: 1px solid #007700;
    float:left;
    min-width:80%;
    max-width:80%;
}

#value {
    display: inline-block;
    border: 1px solid #770000;
    float:left;
    max-width:18%;
    overflow:hidden;
}
于 2013-03-18T21:39:34.287 回答
0

考虑到您有多个带有id="text". 设置 a max-width，定义 a height，并一直设置它们overflow:hidden都floating离开了。您可能必须在行之间使用空白clear-bothdiv。

<div id="text" style="overflow:hidden; float:left; max-width:270px; height:22px;">A very very very very very very very very long text</div><div style="float:left;" id="value">555</div>
于 2013-03-18T21:44:38.447 回答