2 div彼此相邻

Question

首先，我在StackOverflow上搜索过，但我找不到一个对我有用的解决方案。

我有一个div元素，在那里我有另外两个div元素需要彼此相邻。

第一个div有一个固定的，而第二个div应该占用剩余的屏幕空间。

感谢StackOverflow，我发现了以下内容：

.element {
    margin-bottom:15px;
    height: 40px;
}
.element div {
    vertical-align: top;
    height: 40px;
}
.element div:first-child {
    float: left;
    width: 100px;
    background-color: red;
}
.element div:last-child {
    margin-left: 100px;
    background-color: green;
}

<div class="container">
    <div class="element">
        <div>col 1</div>
        <div>col 2</div>
    </div>
</div>

这为HTML提供了以下输出：

但是，当我在＆＃34; col2＆＃34;中放置一个输入元素时，输入元素被推到边界之外，见下图：

这让我疯狂，我在这里找不到解决方案。

我也创建了JsFiddle。

Answer 1

您可以将css box-sizing设置为border-box，以删除添加到宽度的填充：

box-sizing : border-box;

<强> Working Demo

Answer 2

将box-sizing: border-box;设为.element INPUT - DEMO

.element INPUT {
    -webkit-box-sizing : border-box;‌
    -moz-box-sizing : border-box;
    box-sizing:border-box;
}

Answer 3

为了使其适用于所有浏览器，请将您的css更改为：

.element INPUT {width: 100%; box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;}