3个嵌套div - 固定宽度父，左和右宽度基于内容，空中心宽度等于差异？

Question

这可能真的很棘手！

这里是我想要实现：

这是我test code上的jsfiddle

我已经试过各种事情没有任何的运气。 问题是左右div宽度都是基于文本宽度。我也不能将加入的虚线放在左边和右边的div下面，只是通过背景色来掩盖它，因为网站的背景是渐变。

至少在这种情况下，父div是固定的。

有什么想法？

Answer 1

我真的很讨厌提供关于使用表的建议，但是，这将是使用table/div/css混合解决方案的最简单方法。经过测试和工作。

<div style="position: relative; width: 300px; height: auto;"> 
<table style="width: 100%"> 
    <tr> 
    <td style="float: left; width: auto"> 
     a 
    </td> 
    <td style="width: 100%; text-align: left;"> 
     <div style="width: 100%; border-bottom: 1px dotted #fff; height:10px;"> </div> 
    </td> 
    <td style="float:right"> 
     z 
    </td> 
    </tr> 
</table> 
</div> 
<div style="position: relative; width: 300px; height: auto;"> 
<table style="width: 100%"> 
    <tr> 
    <td style="float: left; width: auto"> 
     1 
    </td> 
    <td style="width: 100%; text-align: left;"> 
     <div style="width: 100%; border-bottom: 1px dotted #fff; height:10px;"> </div> 
    </td> 
    <td style="float:right"> 
     infinity 
    </td> 
    </tr> 
</table> 
</div> 

Answer 2

稍微玩了一下jsfiddle代码，并查找3列CSS灵活的布局后，我试着搜索'css目录'。第一项是CSS Table of Contents，看起来可能适合你。否则，请查看帖子中提到的帖子或其他搜索结果。