css - 在内容上,空中心宽度等于差异,3嵌套的div固定宽度父级,左&右宽度基于?

  显示原文与译文双语对照的内容

这可能有点棘手 !

以下是我想要实现的内容:

3 column finella

这是我在jsfiddle上的测试代码

我尝试了很多东西,没有任何运气。 问题是左和右div宽度都基于下面的文本宽度。 在左边和右边的div下面,我也不能有连接虚线,只需用 background 颜色掩盖它,因为这个位置是一个梯度。

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

有什么想法?

时间: 原作者:

我真的讨厌为使用表提供建议,但是这是用 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>

原作者:
...