这可能真的很棘手!
这是我想要实现的目标:
这是jsfiddle上的test code
我尝试了各种各样的东西而没有任何运气。 问题是左边和右边的div宽度都是基于文本宽度。我也不能在左边和右边的div下方加入虚线,只是用背景颜色掩盖它,因为网站的背景是渐变。
至少在这种情况下,父div是固定的。
有什么想法?
答案 0 :(得分:0)
稍微使用jsfiddle代码,并查找3列CSS灵活布局后,我尝试使用Google搜索“css目录”。第一个条目是CSS Table of Contents,看起来它可能适合您。否则,请查看帖子中引用的帖子或其他搜索结果。
答案 1 :(得分:0)
我真的很讨厌提供使用表格的建议但是,这将是使用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>