javascript - 2个div彼此相邻

Question

首先，我在 StackOverflow 上进行了搜索，但找不到完全适合我的解决方案。

我有一个 div 元素，其中还有 2 个需要彼此相邻放置的 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 输出:

但是，当我在“col2”中放置一个输入元素时，输入元素被推到边界之外，见下图:

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

我创建了一个 JsFiddle还有。

Answer 1

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

box-sizing : border-box;

Working Demo