0

为了让我的前端 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 的方法来精确测量各种标题标题的像素宽度。

提前感谢您的任何想法。

4

1 回答 1

1

我相信您最好的选择是使用 CSS 完成所有样式客户端，而不是尝试计算服务器上的文本宽度。

HTML：

<div class="container">
   <span class="fixed">FIXED WIDTH (110px)</span>
   <div class="varies">WIDTH VARIES WITH HEADER TEXT</div>
   <div class="right">WIDTH EXPANDS TO FILL REMAINING SPACE</div>
</div>

CSS：

.container {
    overflow: hidden; /* clear the float */

}
.fixed {
    height: 50px;
    width: 110px;
    vertical-align:middle;
    float: left;
    border-radius:10px;
    background-color:red;
}
.varies {
    height: 50px;
    float: left;
    border-radius:10px;
    background-color:green;
}

.right {
    height: 50px;
    overflow: hidden;
    background-color: blue;
    border-radius:10px;
}

基于此答案：如何使 inline-block 元素填充该行的其余部分？

小提琴在这里：http: //jsfiddle.net/YRDCF/

于 2013-04-24T20:06:10.170 回答