html - "width: whatever-is-left-in-the-line;"的 CSS 是什么？

Question

我希望能够告诉 HTML 实体占用行中所有未使用的空间。所以，我会有类似的东西:

------------------------------------------------------------------------
| normal text |    as much as possible    | some longer normal text    |
------------------------------------------------------------------------

The problem is that I don't know the size of "normal" or "longer normal", so I can't set pixels, points, or percentages. The best I know how to do is:

<table border="0" cellpadding="0" cellspacing="0" with="100%">
<tr><td style="border: 1px solid red;">normal&nbsp;text</td>
    <td style="border: 1px solid green; width: 100%;">as much as possible</td>
    <td style="border: 1px solid red;">much&nbsp;longer;&nbsp;normal&nbsp;text</td>
</tr>
</table>

这看起来真的很糟糕。更不用说您需要记住使用   否则，表格会在您的单词之间放置换行符。

在 Qt 之类的东西中，我只需要设置扩展属性或拉伸(stretch)性。有没有办法用 CSS 做到这一点？

编辑:最好不使用表格

Answer 1

有一个鲜为人知但非常有效的技术可以解决这个问题:

Text-align: justify;

基本上，它会强制您的 div 向左和向右浮动，并根据需要占用尽可能多的空间，而不必使用 float ，因为 float 会带来各种其他相关问题。

其中有趣的部分是添加的伪元素。 Text-align: justify 不适用于最后一行(在您的情况下，只有一行)。所以你在真实内容之后添加了一个虚假的最后一行，这样你的单行内容就可以达到效果。

Codepen Demo

HTML:

<div class="container">
  <div class="text">Any length text here</div>
  <div class="text">My Right side text as long as i want</div>
</div>

CSS:

.container {
      text-align: justify;
      line-height: 0; // so that the invisible last line doesn't take up space
      &:after { // adds a false last line to the content so justify is applied
        content: '';
        display: inline-block;
        width: 100%;
      }
    }
.text { display: inline-block; }

进一步阅读:http://www.barrelny.com/blog/text-align-justify-and-rwd/

scss mixins to handle this