css - 2 个 float div，第一个 div 宽度为 100%

Question

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

此处描述代码:http://jsfiddle.net/7EW5h/4/

谢谢

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。