如何使跨度将可用空间延伸到其他跨度？答案

【问题标题】：How can I make a span stretch the available space between to other spans?如何使跨度将可用空间延伸到其他跨度？
【发布时间】：2013-01-05 19:12:13
【问题描述】：

我想在一个 div 中创建一个由三个 span 组成的元素。三个跨度应使用 div 提供的整个宽度。左右跨度具有固定的宽度，中间的跨度应该使用它们之间的整个可用空间。我一直在尝试许多不同的东西（浮动、溢出等），但我还没有找到答案，而且我的想法已经不多了......

代码比较简单：

<div class="row">
  <span class="rowLeft">LEFT</span>
  <span class="rowCentre">CENTER</span>
  <span class="rowRight">RIGHT</span>
</div>

使用以下 CSS：

.row {
  display: block;
  height: 62px;
  border: 1px dotted black;
}
.rowLeft {
  float: left;
  width: 40px;
  height: 60px;
  border: 1px solid red;
}
.rowCentre {
  float: left;
  height: 60px;
  border: 1px dashed blue;
}
.rowRight {
  float: right;
  width: 60px;
  height: 60px;
  border: 1px solid green;
}

我为此创建了一个 jsFiddle：http://jsfiddle.net/ezAdf/

问题：从这里开始，如何让中心跨度拉伸左右跨度之间的可用空间？

【问题讨论】：

搜索带有固定侧边栏的流畅布局
谢谢，这至少是一个很好的起点。

标签： css width html

【解决方案1】：

有点像@j08691 的解决方案，有一些变化。（虽然可以在 4 个浏览器中使用。）我删除了浮动，将 display: table-cell 添加到 span 和 display: table 加上 width: 100% 到 .row

工作小提琴here.

【讨论】：

【解决方案2】：

您可以在每个跨度上使用display:table-cell CSS 属性，然后将中心跨度的宽度设置为 100%。

jsFiddle example

.row {
  display: block;
  height: 100px;
  border: 1px dotted black;
}
.rowLeft {
  width: 40px;
  height: 60px;
  border: 1px solid red;
  display:table-cell;
}
.rowCentre {
  height: 60px;
  border: 1px dashed blue;
  display:table-cell;
  width:100%;

}
.rowRight {
  width: 60px;
  height: 60px;
  border: 1px solid green;
  display:table-cell;
}

【讨论】：

谢谢，但是这个解决方案破坏了单元格宽度的定义。尝试设置例如将.rowRight的宽度改为100px，你会看到宽度没有改变。
感谢您的回答，但您的小提琴清楚地表明单元格的 width 仍然不正确。

【解决方案3】：

只需对您的 CSS 文件进行以下更改：

.row {
  display: block;
  height: 62px;
  border: 1px dotted black;   
  position: relative;
}

.rowLeft {
  width: 40px;
  height: 60px;
  border: 1px solid red; 
  float: left;
}

.rowCentre{
  position: absolute;
  left: 40px;
  right: 60px;
  height: 60px;
  border: 1px dashed blue;  
  float: left;
}

.rowRight{
  width: 60px;
  height: 60px;
  border: 1px solid green;  
  float: right;
}

【讨论】：

谢谢，但这并没有真正帮助我，因为中心跨度的绝对位置。我想动态地创建这些元素，所以事先不知道位置。