向左浮动的两列的 CSS

Question

我想使用 CSS 在列中并排显示两条文本。左列文本的长度是可变的，而右列文本是固定的并且总是相同的长度。

我希望两个“列”彼此相邻浮动到左侧，例如

[Variable Text] [Fixed text]

如果变量文本很长，我希望它换行。 例如，

Here is a very long  Hello World
piece of variable
text which wraps

如果变量文本很短，我的代码可以工作，但如果变量文本换行，我会得到不需要的空格。 例如，

Here is a very long               Hello World
piece of variable
text which wraps

这是我的代码：

#wrapper {
  margin-right: 100px;
}
#left-col {
  float: left;
  max-width: 100%;
  background-color: #CCF;
}
#right-col {
  float: left;
  width: 100px;
  margin-right: -100px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}

<div id="wrapper">
      <div id="left-col">Here is a very long piece of text which wraps</div>
      <div id="right-col">Hello World</div>
      <div id="cleared"></div>
</div>

Answer 1

我相信将 #left-col 的属性 max-width 更改为 100% 以外的值会起作用。例如：

#wrapper {
  margin-right: 100px;
}
#left-col {
  float: left;
  max-width: 200px;
  background-color: #CCF;
}
#right-col {
  float: left;
  width: 100px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}

Here 是一个 jsfiddle，为了清晰起见，它具有各种文本长度。

Answer 2

如果没有class 或id，您也许可以将您的html 更新为更有意义且更易于样式化的内容。 （<dl> 不是最有效的，但会显示易于样式化的替代标签）

calc() 在这里很有用:)

#wrapper {
width:15em;/* demo purpse */
  }
dl,dt,dd {
  padding:0;
  margin:0;
  
}
dt {
  float: left;
  clear:left;
  text-align:justify;/* to fill up entire first lines when text wraps*/
  max-width: calc(100% - 100px);
  background-color: #CCF;
  margin-top:0.1em;
}
dd {float:left;
  width: 100px;
  background-color: #FFA;
}

<dl id="wrapper">
      <dt>1 Here is a very long piece of text which wraps</dt>
      <dd>Hello World 1</dd>
      <dt>2 Here is a very long piece of text which</dt>
      <dd>Hello World 2</dd>
      <dt>3 Here is a very long piece of text</dt>
      <dd>Hello World 3</dd>
      <dt>4 Here is a very long piece</dt>
      <dd>Hello World 4</dd>
      <dt>5 short</dt>
      <dd>5</dd>
</dl>