Jquery移动网格块宽度设置自动

Question

我正在使用带有Phonegap的Jquery mobile。我想在页面的页脚中有一个网格视图，其中包含 3 个块。它类似于聊天页面。第一个块包含一个按钮，第二个块包括一个输入字段，第三个块包含一个提交按钮。

我想让第一个和第三个块具有固定宽度，第二个块填充剩余的空间。这是我的代码 -

.HTML-

<fieldset class="ui-grid-b">
    <div class="ui-block-a attach"><input type="button" value="Hmm"></div>
    <div class="ui-block-b text"><input type="text" value="No"></div>
    <div class="ui-block-c send"><input type="button" value="Yes"></div>
</fieldset>

.CSS-

.attach{
width:70px !important;
text-align:center !important;
}

.text{
width: auto !important;
text-align:center !important;
}
.send{
width:100px !important;
text-align:center;
}

它没有按预期工作。我对此很陌生。在这方面的任何帮助将不胜感激。

Answer 1

我也在寻找这个答案，并找到了！

取代：

.text{ width: auto !important; text-align:center !important; }

跟：

.text{ width: calc(100% - 170px) !important; text-align:center !important; }

CSS 将计算宽度。

一个稍微改变的例子：jsFiddle

---

PhoneGap的更新：

由于您正在使用它来制作移动应用程序，因此以我上面所说的方式是不可能的。你需要 JavaScript 来克服 calc（） 在 Android 应用程序中无法识别的问题。

例如： $("#text-block").css("width","100%").css("width","-=170px")这需要在触发设备就绪事件后执行。请注意，包含文本输入的块必须具有与 JavaScript 文件中相同的 id。

一个工作的例子：jsFiddle