这可能真的很棘手!
这是我想要实现的:
这是我的 test code在 jsfiddle 上
我尝试过各种方法,但都没有成功。 问题是左右 div 宽度都基于其中的文本宽度。我也不能让连接的虚线位于左右 div 的下方,并且只是用背景颜色掩盖它,因为网站的背景是渐变的。
至少在这种情况下,父 div 是固定的。
有什么想法吗?
最佳答案
我真的很讨厌提供有关使用表格的建议,但是,这将是使用表格/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>
关于css - 3 个嵌套 div - 父级固定宽度,基于内容的左右宽度,空中心宽度等于差异?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5326881/