Question

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

我希望第1和第3块具有固定宽度，第2块填充剩余的空间。这是我的代码 -

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来克服Android应用程序无法识别calc（）的问题。

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

一个工作示例：jsFiddle

Jquery移动网格块宽度设置为auto

1 个答案:

PhoneGap更新：