0

我正在尝试创建动态宽度字段输入，以便它们延伸到 div 的宽度。

如果单行有两个输入，它们将动态分割可用空间以填充 100% 的 div。

如果一行只有一个输入，它将填满整个宽度。

问题是标签宽度和输入宽度都是未知的（响应式网页设计）。

令人惊讶的是，这很难与我确定它的普遍性有关。

http://imagepaste.nullnetwork.net/img/1339700574Screen%20Shot%202012-06-14%20at%203.04.59%20PM.png

4

2 回答 2

0

使用 JsFiddle 进行一些快速测试（顺便说一句，请发布示例代码，以便我们可以看到您到目前为止所做的事情）给了我这个：

<div style="width:100%;border:1px solid gold;">
    <div style="width:100%; border:1px solid silver;">
        <div style="float:left;width:45%">In1 <input style="width:90%;"></div>
        <div style="float:right;width:45%">In2 <input style="width:90%;"></div>
    </div>
    <div style="clear:both;width:100%;border:1px solid silver;">
        <div style="float:left;width:20%">In1 <input style="width:90%;"></div>
        <div style="float:left;width:20%">In2 <input style="width:90%;"></div>
        <div style="float:right;width:20%">In3 <input style="width:90%;"></div>
    </div>
</div>

<div style="clear:both">&nbsp;</div>

<table style="width:100%;border:1px solid gold;">
    <tr>
        <td style="width:49%;border:1px solid silver;">In1 <input style="width:60%"></td>
        <td style="width:49%;border:1px solid silver;">In2 <input style="width:60%"></td>
    </tr>
</table>
<table style="width:100%;border:1px solid gold;">
    <tr>
        <td style="width:29%;border:1px solid silver;">In1 <input style="width:60%"></td>
        <td style="width:29%;border:1px solid silver;">In2 <input style="width:60%"></td>
        <td style="width:29%;border:1px solid silver;">In2 <input style="width:60%"></td>
    </tr>
</table>

在这里看到它。正如您所看到的，这两个版本都不完全正确，但是像往常一样，基于表格的布局更加健壮，即使在进一步搞砸之后，我也无法让三列集正常工作，但使用表格很容易。

最重要的是计算百分比。当您使用 JS 时，这应该是相当简单的。但是，如果标签也可以变化，这将使计算变得相当复杂。

于 2012-06-14T22:20:44.163 回答
0

是的，使用 jQuery，您可以计算 div 中输入元素的数量，并相应地调整元素的宽度。

您可以使用lengthorsosize()确定元素的数量，然后设置 css 来做同样的事情

这是一个粗略的模型：http: //jsfiddle.net/6CqKK/

于 2012-06-14T21:36:06.073 回答