让div取走另一个div后留下的所有空格 [英] Make div take all space left after another div

问题描述

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

我需要第一个div来占用所有可用空间而不需要扩展父项如果需要的话可以剪辑。蚂蚁应该考虑第二个div的宽度。所以如果文本的长度很短，那么两个div应该并排，但是如果文本很长，那么第一个div将被剪切，第二个将被一直推到右边。

以下是近似的表格布局：

 < div id =container> 
< div id =row> 
< span id =text>短文本< / span>< span id =value> 123< / span> 
< / div> 
 
< div id =row> 
< span id =text>稍长的文字< / span>< span id =value> 555< / span> 
< / div> 
 
< div id =row> 
< span id =text>> 555< / span>< / span> 
< / div> 
< / div> 
  

和相应的CSS：

  #container {
 border：1px solid＃000000; 
 width：300px; 
} 
 
 #row {
 display：inline-block; 
 border：1px solid＃000077; 
宽度：100％; 
明确：两者; 
} 
 
 #text {
 display：inline-block; 
 border：1px solid＃007700; 
} 
 
 #value {
 display：inline-block; 
 border：1px solid＃770000; 
} 
  

这是 jsfiddle 模板说明我需要什么。
应该裁剪一条很长的文本行，并且应该在同一行放置555行，以便整个构造符合指定的300px（数字是任意的，它将由现实生活中的其他元素定义，它是事先并不知道）。

解决方案

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

  #container {
 display：table; 
} 
 
 #row {
 display：table-row; 
} 
 
 #text {
 display：table-cell; 
} 
 
 #value {
 display：table-cell; 
} 
  

I have two divs side by side. The firs one contains a text field that can be rather lengthy and another one contains a number that is short.

I need the first div to occupy all available space without stretching parent and clipping if neccessary. Ant it should take width of a second div into account. So if length of the text is short, then two divs should be side by side, but if text is long, then the first one will be clipped and the second one will be pushed all the way to the right.

Here is approximate table layout:

<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>

And corresponding 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;
}

Here is a jsfiddle template illustrating what I need. A very long text line should be clipped and 555 should be placed next to it on the same line so that entire construction fits into specified 300px (number is arbitrary, it will be defined by other elements in real life and it is not known in advance).

解决方案

You possibly could use display: table (Fiddle):

#container {
    display: table;
}

#row {
    display: table-row;
}

#text {
    display: table-cell;
}

#value {
    display: table-cell;
}

这篇关于让div取走另一个div后留下的所有空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！