Html 我能把两个div放在一起吗？当一个被移除时，另一个会扩展以填充空间？_Html_Css

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

html css

Html 我能把两个div放在一起吗？当一个被移除时，另一个会扩展以填充空间？,html,css,Html,Css,假设在一个固定宽度的容器中有两个相邻的div。水平地挨着彼此就是。然后假设一个div被移除，我如何让另一个div填充它旁边的空间，另一个div所在的位置？如中所示，它应该扩展其宽度。您可以使用jQuery操作CSS属性和可见性。我改变了宽度。我认为这在IE中不起作用。。。我已经在Chrome、Firefox和Safari中进行了测试，但这可能适合您这是一把小提琴 CSS: Javascript: function removeElement(divNum) { var d = docume

假设在一个固定宽度的容器中有两个相邻的div。水平地挨着彼此就是。然后假设一个div被移除，我如何让另一个div填充它旁边的空间，另一个div所在的位置？如中所示，它应该扩展其宽度。

您可以使用jQuery操作CSS属性和可见性。我改变了宽度。

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

这是一把小提琴

CSS:

Javascript:

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

HTML:

一种不用Javascript的方法。

您可以使用

显示：表格但它在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>


试验室
#容器{
宽度：400px；
显示：表格；
}
#行容器{
显示：表格行；
}
#左，#右{
显示：表格单元格；
高度：200px；
}
#左{
背景色：红色；
}
#对{
背景颜色：蓝色；
}
如何删除div？如果您使用的是javascript，那么当用户启动移除事件时，您可以通过编程设置另一个div的宽度。它只是根据情况不会显示，但问题是这两个div不知道其他div的状态。我希望在没有js的情况下，会有一些css技巧来完成此操作。我可以使用我知道的表格，但更喜欢divsHey CircleB，这几乎是我所需要的，除了如果右div不可见，左div不会向右扩展。有什么想法吗？
<div id="container">
   <div id="left"></div>
   <div id="right"></div>
   <input onclick="removeElement('left')" type="button" value="X"/>
</div>

<!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>