html - 将 div 与第一个并排对齐，占据第二个 div 不需要的整个宽度

Question

我有一行应该显示标签和按钮。标签应该左对齐，按钮应该右对齐。标签应该占据按钮不需要的所有空间。 标签文本和按钮文本是动态的，因此不能使用固定长度。

如何在不使用 Javascript 的情况下实现这一点？

.label
{
  background-color: yellow;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buttoncontainer
{
  text-align: right;
}

<div class="container">
  <div class="header">
    <div class="label">This is the label that could get pretty long so that it has to be made smaller with ellipsis so it doesn't take multiple lines are overflows the button</div>
    <div class="buttoncontainer">
      <button>Zoom in</button>
    </div>
  </div>
  <div class="#body">
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie
  </div>
</div>

Answer 1

有人告诉我只对表格数据使用表格。但这是我能想到的让它在没有 JS 的情况下工作的唯一方法。无需将 div 元素更改为 table 元素。它将在 CSS 中进行控制。

https://jsfiddle.net/xmww2koh/

您的标题将成为表格

.header {display: table}

另外两个容器是细胞。然后仅在按钮上放置一个宽度。

.label {display: table-cell;}
.buttonContainer {display: table-cell; width: 100px;}

这将使标签占据按钮未使用的所有宽度。