使3个跨度恰好填充一行

Question

我有以下问题：

我在一个带有给定的文档中有一行。

现在我有3个元素，其中一个是<a>，两个是<span>。

<a> - 标记包含一个没有固定宽度的字符串。因此<a>将具有不同的宽度。

第三个元素是<span>，其宽度固定，必须位于树容器的右边界。

第二个元素，即第一个<span>应该恰好适合中间。

到目前为止，我没有找到任何方法来实现这个目标。我知道这可能是一张桌子，但这似乎不是正确的方法。我相信也有一个CSS解决方案。

Answer 1

要添加到display:table;选项，您可以使用display:flex;或float方法重新访问旧版浏览器的结果为margin： DEMO (both methods)

软硬度：

HTML

<p class="flex"><a href="#"> text as long as needed </a>
<span class="middle">
   text with any width text with any width text with any width text with any width 
</span>
  <span> span </span>
</p>

CSS

.flex {
  display:flex;
}
.middle {
  flex:2;
  white-space:nowrap;
}

---

float诀窍：

HTML

<p class="funny"><a href="#"> text as long as needed </a>
<span class="right"> span </span>
<span class="layout">
  <span> text with any width text with any width text with any width text with any width </span>
</span>
</p>

CSS

a {
  float:left;
  background:#2EAF2E;
  color:#2B3A23;
  text-decoration:none;
}
.right {
  float:right;
  color:white;
  background:#333;
}
.layout {
  display:block;
  overflow:hidden;
  background:#AA2425;
  color:#2B3A23;
}
.layout span {
  display:inline-block;
  margin-right:-9999px;
}

Answer 2

display:table和display:table-cell是您的朋友。并且非常跨浏览器兼容。也可以使用vertical-align: middle。

这是一个演示：

http://jsbin.com/tofewa/1/edit