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

Question

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

的代码说明如下：http://jsfiddle.net/7EW5h/4/

感谢

Answer 1

您是否尝试过使用position:absolute;，因为你需要的元素的位置？

见小提琴 - JSFiddle Example

Answer 2

可以使用calc CSS3功能和动态宽度设置为#inner1股利如下：

width: calc(100% - 20px); 

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

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

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

，使其与铬19（或更高版本），火狐4（或更高版本），互联网浏览器9（或更高版本）和Safari 6兼容的（或后来）。

你可以在这里查看兼容表：http://caniuse.com/#search=calc

关于你的例子，我不得不设置border: 0到#inner1和#inner2的div。

Answer 3

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

1. 使用的容器两个输入元素。
2. 更改元素的顺序，使正确一个是第一个。
3. 不要浮动应该填充剩余空间的元素，只需将display设置为block（这是div元素的默认值）。
4. 将较大容器的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 4

我认为，没有复杂的事情，你可以做到以下几点。

1. 从两个输入中移除浮标。
2. 如下图所示，绝对放置第二个输入。

3. 为第一个输入添加填充以避免内容重叠。 还，即使它不是在我下面的代码所示，别忘了默认的边框，margin和padding的存在。

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