Question

我有这个简单的设置：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 2

如果找不到更好的解决方案，可以尝试使用javascript动态设置宽度。将您的HTML更改为以下内容：

<div class="container">
    <div class="column">Column 1.</div>
    <div id="column2Outer" class="column">
        <div id="column2Inner" style="display: inline-block">Column 2 is a bit longer.</div>
    </div>
    <div class="column">Column 3.</div>
</div>

javascript如下：

$("#column2Outer").css("width", document.getElementById("column2Inner").clientWidth);

您可以在$(document).ready()或内容更改时调用此方法。您当然还必须从内部列中删除边框，这样您就无法告诉它是嵌套的div

改变3个圆柱显示的比例：table / table-cell

2 个答案: