html - 改变 3 列显示的比例 : table/table-cell

Question

我有这个简单的设置:

.container {
  display: table;
  width: 70%;
  text-align: center;
}
div {
  border: 1px solid #336;
}
.column {
  display: table-cell;
}

<div class="container">
  <div class="column">Column 1.</div>
  <div class="column">Column 2 is a bit longer.</div>
  <div class="column">Column 3.</div>
</div>

jsFiddle:http://jsfiddle.net/aqk1yy1d/

此表格单元格行为会随着窗口大小的调整而扩展。我希望中心单元格/div 固定为其内容而不展开。基本上边应该扩展而不是内部单元格，应该是它的内容的大小。

如果不在某处设置定义的宽度，我不知道如何做到这一点，但这样不行，因为我将在中间单元格中有不同长度的内容....

有什么建议吗？

Answer 1

诀窍是将左列和右列都设置为占据表格宽度的 50%。中心列的宽度为 1px。如果中心列中的内容大于 1px，它将强制中心列增长。

第一个例子里面只有文本，它会在第一时间换行。要缓解这种情况，请添加类似 white-space: nowrap 的内容以将所有文本保持在一行中或确保您的内容具有宽度。

.container {
  display: table;
  width: 70%;
  text-align: center;
  margin-bottom: 10px;
}
div {
  border: 1px solid #336;
}
.column {
  display: table-cell;
}
.left,
.right {
  width: 50%;
}
.center {
  width: 1px;
}
.center-content {
  white-space: nowrap;
}

<div class="container">
  <div class="column left">Column 1.</div>
  <div class="column center">Column 2 is a bit longer.</div>
  <div class="column right">Column 3.</div>
</div>

<div class="container">
  <div class="column left">Column 1.</div>
  <div class="column center"><div class="center-content">Column 2 is a bit longer.</div></div>
  <div class="column right">Column 3.</div>
</div>