Html 动态增加div的高度为同级div创建了空间_Html_Css_Twitter Bootstrap 3

Html 动态增加div的高度为同级div创建了空间

html css twitter-bootstrap-3

Html 动态增加div的高度为同级div创建了空间,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,我必须增加一个div的高度，当它的高度增加时，它的同级div下面会出现空间，这不应该发生，它应该保持不变 <div class = "col-md-12"> <div class = "col-md-6 sibling1"></div> <div class = "col-md-6 sibling2"></div> </div> <div class = "col-md-12"> <

我必须增加一个

div

的高度，当它的高度增加时，它的同级

div

下面会出现空间，这不应该发生，它应该保持不变

<div class = "col-md-12">
    <div class = "col-md-6 sibling1"></div>
    <div class = "col-md-6 sibling2"></div>
</div>
<div class = "col-md-12">
    <div class = "col-md-6"></div>
    <div class = "col-md-6"></div>
</div>

如果我增加“sibling2”的高度，应该不会对页面产生任何影响

在上图中，我尝试增加

div

（黑色背景）的高度，因为

div

（aliceblue背景）有相应的空间

如何修复它。


    <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    .contain1{
        width: 100%;
        height: auto;
        display: flex;
    }
    .box1{
        width: 50%;
        background-color: #f0f8ff;
        height: 100px;
    }
    .box2{
        width: 50%;
        background-color: black;
        height: 150px;
    }
    .contain2{
        background-color: #EAE7E6;
        height: 200px;
    }
</style>
<body>
    <div class="contain1">
        <div class="box1">

        </div>
        <div class="box2">

        </div>
    </div>
    <div class="contain2">

    </div>
</body>
</html>

.1{
宽度：100%；
高度：自动；
显示器：flex；
}
.box1{
宽度：50%；
背景色：#f0f8ff；
高度：100px；
}
.box2{
宽度：50%；
背景色：黑色；
高度：150像素；
}
.2{
背景色：#EAE7E6；
高度：200px；
}

现在尝试增加.box2的高度，看看效果如何。

您是否可以粘贴代码作为示例，以便我们更好地帮助您？上面的HTML代码片段您可以参考。仍然存在问题