改变比例3列显示：table / table-cell [英] change proportions of 3 columned display: table / table-cell

问题描述

我有这个简单的设置：

  .container {display：table;宽度：70％; text-align：center;} div {border：1px solid＃336;}。column {display：table-cell;}  

 < div class =container> < div class =column>第1列。< / div> < div class =column>栏2有点长。< / div> < div class =column>第3列。< / div>< / div>  

b
$ b

jsFiddle： http://jsfiddle.net/aqk1yy1d/ p>

此表单元格行为随窗口大小扩展。我想中心单元格/ div被固定到其内容，而不扩大。基本上侧面应该展开，但不是内部单元格，应该是其内容的大小。

我没有看到我可以做这个没有设置一个定义的宽度

任何指针？

解决方案

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

第一个示例中只有文本，它将在第一个时刻。要减轻这种情况，可以添加 white-space：nowrap 以将所有文本保留在一行上，或确保您的内容具有宽度。

  .container {display：table;宽度：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>第1列。< / div> < div class =column center>栏2有点长。< / div> < div class =column right>第3列。< / div>< / div>< div class =container> < div class =column left>第1列。< / div> < div class =column center>< div class =center-content>栏2有点长。< / div>< / div& < div class =column right>第3栏。< / div>< / div>  

I have this simple setup:

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

This table-cell behavior expands with window resize. I would like the center cell/div to be fixed to its content and not expand. Basically the sides should expand but not the inner cell, wich should be the size of its content.

I don't see how I can do this without setting a defined width somewhere, but that in not ok, because I will have different length of content in that middle cell....

Any pointers?

解决方案

The trick is to set both the left and right column to take up 50% of the width of the table. The center column gets a width of 1px. If there is content larger than 1px in the center column it will force the center column to grow.

The first example only has text inside it, which will wrap at the first moment. To mitigate this add something like white-space: nowrap to keep all text on a single line or make sure that you have content with a width.

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

这篇关于改变比例3列显示：table / table-cell的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！