Question

我想在div中创建一个由三个跨度组成的元素。三个跨度应使用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/

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

Answer 1

您可以在每个范围上使用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;
}

Answer 2

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

工作小提琴here。

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

如何跨越其他跨度之间的可用空间？

3 个答案: