Question

假设我在一个固定宽度的容器中彼此相邻有两个div。彼此水平相邻。然后说一个div被移除，我怎么能让另一个div填满其他div旁边的空间？因为它应该扩大它的宽度。

Answer 1

我认为这不适用于IE ...我已经在Chrome，Firefox和Safari中对其进行了测试，但这可能适合您。

Here是一个小提琴。

CSS：

#container {
    width: 400px;
}
#left {
    width: 200px;
    height: 200px;
    background: #ddd;
    float: left;
}
#right {
    width:100%;
    float: right;
    height: 200px;
    position: relative;
    background: #CCC;
}
#left + #right {
    width: 200px;
}

使用Javascript：

function removeElement(divNum) {
  var d = document.getElementById('container');
  var olddiv = document.getElementById(divNum);
  d.removeChild(olddiv);
}

HTML：

<div id="container">
   <div id="left"></div>
   <div id="right"></div>
   <input onclick="removeElement('left')" type="button" value="X"/>
</div>

Answer 2

Here's无需Javascript即可实现。

Answer 3

您可以使用jQuery来操纵CSS属性和可见性。在this example我改变了宽度。

Answer 4

您可以使用display: table;进行此操作，但在IE 7及更低版本中无效。这是代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Test div</title>
    <style type="text/css">
        #container {
            width: 400px;
            display: table;
        }

        #row-container {
            display: table-row;
        }

        #left, #right {
            display: table-cell;
            height: 200px;
        }

        #left {
            background-color: red;
        }

        #right {
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="row-container">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</div>
</body>
</html>

我可以将两个div放在一起，当一个被移除时，另一个扩展以填充空间吗？

4 个答案: