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，看起來可能適合你。否則，請查看帖子中提到的帖子或其他搜索結果。