Question

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

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

问题在于我不知道＆＃34;正常＆＃34;的大小。或者＆＃34;更长的正常＆＃34;，所以我无法设置像素，点数或百分比。我所知道的最好的方法是：

<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这样的东西中，我只想设置展开属性或伸缩性。有没有办法用CSS做到这一点？

编辑：最好不使用表格

Answer 1

您必须尝试设置正常的＆＃34;或者＆＃34;更长的正常＆＃34;通过给出不同的宽度然后中间的一个将自动有一个空间来调整任何左边的行

就像我为＆＃34;正常＆＃34;增加了宽度。或者＆＃34;更长的正常＆＃34;

<table border="0" cellpadding="0" cellspacing="0" width="500">
  <tr><td style="border: 1px solid red;width:80px;">normal text</td>
      <td style="border: 1px solid green; ">as much as possible</td>
      <td style="border: 1px solid red;width:160px;">much longer normal text</td>
  </tr>
</table>

您可以继续使用该属性

min-width: 00px; /* give any amount of pixels*/

给出最小宽度将阻止给定的＆＃39; td＆＃39;从打破文本到两行

这里是FIDDLE

Answer 2

任何不设定大小（相对（％）或绝对（例如，以像素为单位））的单元格将自动展开以填充任何额外空间，假设表格宽于所有单元格的总起始宽度。如果你想让一个特定的细胞成为＆＃34;填充物＆＃34;单元格，其他单元格需要设定宽度。

如果您不希望所有单元格中的文本换行，@ SmokeyPHP的建议是正确的：http://dev.w3.org/csswg/css-text/#white-space

table td { 
  white-space: nowrap; 
}

Answer 3

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

Text-align: justify;

基本上它迫使你的div向左和向右浮动并占用他们需要的空间，而不必使用具有与之相关的各种其他问题的浮动。

这个有趣的部分是添加的伪元素。 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

什么是＆＃34;宽度的CSS：无论是在线还是什么;＆＃34;？

3 个答案: