Question

此问题是Expand a div to take the remaining width的扩展名。

顶级解决方案非常适合让div占用剩余的宽度，但是我将一个输入放在左边的div中。我的期望是输入会扩展以填充div的剩余宽度，但它跳出div并放在底部。

注意红色框正确填充宽度，而蓝色框是固定的。我需要一个输入框与红色框一样：填充剩余的宽度。

<div class="container">
    <div class="right"></div>
    <div class="left">
        <input type="text" class="text"/>
    </div>
</div>

Answer 1

解决方案已在您提供的链接中：

.left {
    overflow: hidden;
}

JSFiddle

另一个解决方案是添加保证金：

.left {
    margin-right: 200px;
}

第一个更灵活。

Answer 2

.container {
    position:relative;
    width:100%;
    height:200px;
    border:1px solid;
}
.right {
    height:200px;
    width:200px;
    background:green;
    float:right;
}
.left {
    width:-webkit-calc(100% - 200px);
    height:178px;
    background:red;
}
.text{
    position:relative;
    width:100%;
    height:20px;
    margin:0;
    border:0;
    top:178px;
}

<div class="container">
    <div class="right"></div>
    <div class="left">
        <input type="text" class="text"/>
    </div>
</div>

展开输入以获取剩余宽度

2 个答案: