为了让我的前端 Web 开发技能保持最新,我决定基于星际迷航粉丝熟悉的虚构 LCARS 用户界面创建一个“沙盒/游戏围栏”网站。这是链接。
http://www.king-con.com/sto/console/
如果您看一下,您可能会注意到一些子部分(视图)具有看起来像跋涉的标题,其基本 HTML 是:
<div style="display:table;width:100%">
<div style="display:table-row;">
<div style="display:table-cell;width:15px;background-color:somecolor;border-radius:10px;">FIXED WIDTH (15px)</div>
<div style="display:table-cell;">WIDTH VARIES WITH HEADER TEXT</div>
<div style="display:table-cell;background-color:somecolor;border-radius:10px;>WIDTH EXPANDS TO FILL REMAINING SPACE</div>
</div>
ATM,我正在使用服务器端函数来写出这些标头。它只需要一个参数(文本)并根据文本的字符长度写出 HTML 。
您可能还会注意到它并没有真正起作用,也就是说,它不能非常精确地猜测标题文本的实际像素宽度,并相应地调整 div 的大小。
我想知道是否没有客户端,也许是基于 jquery 的方法来精确测量各种标题标题的像素宽度。
提前感谢您的任何想法。