Html 如何在隐藏另一个div时自动将div居中

首先我把两个

div

s放在另一个

div

的中间，一切都很好。 我现在的另一个要求是，当第一个

div

旁边的第二个

div

被隐藏时，第一个

div

自动居中：如果我隐藏另一个

div

，则第一个

div

应自动居中对齐

问题是它没有自动调整到中心。有什么办法解决这个问题吗

这是我的html代码

<div class="row" style="margin-left:auto;margin-right:auto;">
<div class="col-md-6" style="height:35%;background-color:red;width:35%;;margin-left:15%;margin-right:auto;">
  <label>First div</label>
</div>

<div class="col-md-6" style="height:35%;background-color:yellow;width:35%;margin-left:5%;" >
    <label>Second div</label>
</div>

第一组
第二组

---

您必须将非消失div的类动态更改为

col-md-12

修改css：

html, body {
    margin:0;
    padding:0;
}
.row {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
.row .col-md-6:first-child {
    height:35%;
    background-color:red;
    width:35%;
    display:inline-block;
}
.row .col-md-6:last-child {
    height:35%;
    background-color:yellow;
    width:35%;
    display:inline-block;
}

要隐藏，只需使用

display:none

演示：

应执行以下操作

$（文档）.ready（函数（）{
if（$（“#a”）.css（“显示”）==‘无’）{
美元（“#b”）.addClass（“a1”）；
}
})

.a1{
利润率：0%50%；
}

abc
xyz

您需要动态删除“col-md-6”，并将

边距：0 auto

添加到第二个div的css中。 这是做这件事的方法。

看看这把小提琴

---

我同意KK，但请确保删除bootstrap添加的浮动：

.row div{
    float:none;
}

试试这个

html

javascript

$("#hideDiv").click(function(){
    $("#b").hide();
       console.log($("#b"));
        $('#a').removeClass("css").addClass("css1");
});

你可以在没有JS的情况下实现这一点（只是为了让一个div消失）

显示：flex将自动将内容重新定位到中心


$（'.container>div'）。在（'click'，function（）上{
$（this.fadeOut（）；
});
.container{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.container>div{
自对准：居中；
文本对齐：居中；
背景颜色：黄色；
宽度：50%；
}
.container>div:第一个子级{
背景色：红色；
}

1.
2.
试试这个，我已经给出了一个纯引导解决方案

此处的更多详细输出：
将这两个div包装在一个div中，并给出
边距：0 auto
。或者指定divs
display:inline块
，并指定父元素
text align:center
。当然，在这两种方式中，你都应该删除这些div的边距。当你的一个div隐藏时，动态应用一个类，该类包含将你的另一个div定位到中心的属性。感谢你的回复，如果我尝试你的代码，它在我的html页面中工作不正常，但在fiddler中很酷，我不知道为什么…也许，你有一些其他的css会影响这一点。尝试删除影响它的其他css，同时隐藏div取决于java脚本中的代码。这不是问题。您可以使用js隐藏它，方法是选择divI，只需使用普通html页面并放置您提供的所有内容。我的要求是当第二个div隐藏时，将第一个div居中使用display:none；而不是可见性：隐藏；它会起作用的
<div id="a"  class="css">A</div>
<div id="b" class="css">B</div>
</br>
<button id="hideDiv">Hide</button> 

.css{
width:50%; 
height:100px; 
float:left; 
display:inline-block;
text-align: center;
}

.css1{
    width:50%; 
    height:100px; 
    margin: 0 auto;
    text-align: center;
}

$("#hideDiv").click(function(){
    $("#b").hide();
       console.log($("#b"));
        $('#a').removeClass("css").addClass("css1");
});