2 个 div 彼此相邻答案

【问题标题】：2 div next to each other2 个 div 彼此相邻
【发布时间】：2014-08-25 18:40:39
【问题描述】：

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

我有一个 div 元素，其中还有 2 个需要彼此相邻放置的 div 元素。

第一个 div 有一个固定的 with，而第二个 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。

【问题讨论】：

stackoverflow.com/questions/1633522/…

标签： javascript jquery html css

【解决方案1】：

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

box-sizing : border-box;

Working Demo

【讨论】：

【解决方案2】：

为了使其在所有浏览器中都能正常工作，请将您的 css 更改为：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：