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 ou id，您可以将html更新为更有意义且更容易设计的内容。 （<dl>不是最有效的，但会显示易于设计的替代标签

calc()在这里很有用：）

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

两个向左浮动的列的CSS

2 个答案: