CSS显示表 - 如何有2个固定列和一个灵活列

Question

我有一个带有div和css的表格构建，以使其具有响应性。有三列 - 位置，描述和价格 - 每个列都有一个输入字段。

看看jsfiddle：http://jsfiddle.net/ZKP3j/3/

-Tags有display：none;因为将在具​​有css媒体查询的小屏幕上使用。所以你可以忽略它。

如何更改我的css，第一个（item1）和第三个（item3）列输入字段具有现在具有的固定宽度，而带有描述的seconde one（item2）应扩展到剩余空间。

只是item2的一个例子：

    <div class="item2">
        <label>Description</label>
        <input type="text" name="description" value="The best DVD on earth" />
    </div>

Answer 1

为item2输入添加100％宽度将拉伸它以适合可用空间。

CSS

.item2 input {
    width:100%;
}

您可能还需要调整item3类以创建item1和item2之间显示的间距。

.item3 {
  width: 98px;
  padding-left:8px;
}

此处的工作示例 - JSFiddle

Answer 2

.item2 input {
    width: 100%; 
}

.item3 input {
    width: 90px;
    text-align: right;
    margin: 0 0 0 8px;
}

JSFiddle