0

假设我在一个固定宽度的容器中有 2 个相邻的 div。水平相邻即是。然后说一个 div 被删除了，我怎样才能让另一个 div 填充另一个 div 所在的旁边的空间？因为它应该扩大它的宽度。

4

4 回答 4

1

我认为这在 IE 中不起作用……我已经在 Chrome、Firefox 和 Safari 中对其进行了测试，但这可能对你有用。

这是一个小提琴。

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>
于 2012-04-21T14:54:40.700 回答
1

这是一种无需 Javascript 即可实现的方法。

于 2012-04-21T16:40:22.493 回答
0

你可以这样做，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>
于 2012-04-21T17:14:26.590 回答
0

您可以使用 jQuery 来操作 CSS 属性和可见性。在这个例子中，我改变了宽度。

于 2012-04-21T14:48:06.503 回答