0

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

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

谢谢

4

4 回答 4

2

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

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和#inner2div。

于 2012-12-07T12:44:21.720 回答
1

我已经在 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 或不使用绝对定位的两个元素的顺序，我无法让它工作。

于 2012-12-07T12:51:03.400 回答
0

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

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

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

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

    ​</p>

于 2012-12-07T13:29:45.760 回答
0

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

请参阅小提琴 - JSFiddle 示例

于 2012-12-07T12:29:32.153 回答