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

Question

这可能真的很棘手！

这是我想要实现的目标：

这是我的 在 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 目录，看起来可能适合您。否则，请查看帖子中引用的帖子或其他搜索结果。