Question

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

由于

Answer 1

您可以使用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。

Answer 2

我已经在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或两个元素的顺序，我无法使其工作。

Answer 3

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

请参阅小提琴 - JSFiddle Example

Answer 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;
                 }

2个浮动的div，第一个div宽度为100％

4 个答案: