2 个浮动 div，第一个 div 宽度为 100%答案

【问题标题】：2 floated divs with first div width 100%2 个浮动 div，第一个 div 宽度为 100%
【发布时间】：2012-11-25 15:01:53
【问题描述】：

我有 2 个 div 漂浮在容器 div 中。第二个 div 有width: 20px。我需要第一个 div 来填充所有可用空间并保持内联。将第一个 div 宽度设置为 100% 不起作用，因为具有固定宽度的第二个 div 会下降。我该怎么办？

代码描述在这里：http://jsfiddle.net/7EW5h/4/

谢谢

【问题讨论】：

你知道容器的大小吗？
我不明白你的问题，你想让第一个 div 占据整个空间，还是整个空间减去 20px？

标签： css html css-float width

【解决方案1】：

您是否尝试过使用position:absolute; 来根据需要定位元素？

见小提琴 - JSFiddle Example

【讨论】：

【解决方案2】：

您可以使用calc CSS3 函数并将动态宽度设置为#inner1 div，如下所示：

width: calc(100% - 20px);

它将与 Firefox 16（或更高版本）和 Internet Explorer 9（或更高版本）兼容。

您可以添加供应商前缀，如下所示：

width: -moz-calc(100% - 20px);
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);

使其与 Chrome 19（或更高版本）、Firefox 4（或更高版本）、Internet Explorer 9（或更高版本）和 Safari 6（或更高版本）兼容。

您可以在此处查看兼容表：http://caniuse.com/#search=calc

以你为例，我必须将 border: 0 设置为 #inner1 和 #inner2 div。

【讨论】：

【解决方案3】：

我已经在 Chrome、IE9、Firefox 和 Opera 中测试并制定了解决方案：

为两个输入元素使用容器。
改变元素的顺序，使右边的是第一个。
不要浮动应该填充剩余空间的元素，只需将display 设置为block（这是div 元素的默认值）。
将较大容器的margin-right 设置为右侧元素的总宽度。在这里，我们还需要考虑两个元素的边框、边距和填充。

HTML：

<div id="container">
    <div id="inner2">
        <input />
    </div>
    <div id="inner1">
        <input />
    </div>
</div>

CSS：

#inner2 {
    float: right;
}
#inner2 input {
    height: 20px;
    width: 20px;
    border: 1px solid #000;
}
#inner1 {
    margin-right: 24px;
}
#inner1 input {
    width: 100%;
    height: 20px;
    border: 1px solid #000;
}

实时示例：http://jsfiddle.net/7EW5h/22/。另请注意，我在两个 input 元素上明确设置了边框。

如果不更改 HTML 或不使用绝对定位的两个元素的顺序，我无法让它工作。

【讨论】：

【解决方案4】：

我认为，在不使事情复杂化的情况下，您可以执行以下操作。

从两个输入中移除浮点数。
绝对定位第二个输入，如下所示。

在第一个输入中添加 padding-right 以避免内容重叠。另外，即使我下面的代码中没有显示，也不要忘记默认边框、边距和内边距的存在。

       #container {
           overflow: hidden;
           background-color: red;
        }

               #inner1 {
                  width: 100%;
                   background-color: blue;
                   padding-right:45px;

                 }

             #inner2 {
                height: 20px;
                width: 20px;
                 background-color: green;
                 position:absolute;
                 right:0;
                 top:0;
                 }

【讨论】：