Html 如何在另一个div中并排对齐一个div

我有一个主div，还有两个div和in，我试着把内部div并排放置。我已经尝试了以下代码，但我不明白为什么它不工作。如果将float应用于我的内部div，它们就会消失。这是我的密码：

<div id="mainContainer">
<div id="leftSide"></div>
<div id="rightSide"> </div>
</div>



 body{
        background-color: #006847;
    }

    #mainContainer{
        background-color: #FFFFFF;
        max-width: 95%;
        height: 500px;
        margin: 0 auto;
        box-shadow:10px 10px 5px red;
        margin-top: 50px;
    }

    #leftSide{
        background-color: #CE1126;
        max-width: 40%;
        height: 900px;
    }
    #rightSide{
        max-width: 50%;
        height: 900px;
        background-color: purple;
        float: right;
    }

身体{
背景色：#006847；
}
#主容器{
背景色：#FFFFFF；
最大宽度：95%；
高度：500px；
保证金：0自动；
盒影：10px 10px 5px红色；
边缘顶部：50px；
}
#左边{
背景色：#CE1126；
最大宽度：40%；
高度：900px；
}
#右侧{
最大宽度：50%；
高度：900px；
背景颜色：紫色；
浮动：对；
}

我简化了您的代码并将其转换为JSFIDLE。基本上，除非非常必要，否则您不希望浮动。使用

显示：内联块取而代之
 使用
显示：内联块

将内部div的
height
更改为
500px
，因为您的容器
height
是
500px

将
最大宽度
更改为
宽度
<需要指定代码>宽度
，才能使
最大宽度
正常工作

如果设置了固定宽度和最大宽度，这意味着：

如果宽度超过“最大宽度”，请将其保持在“最大宽度”。如果宽度
低于最大宽度，请保持宽度不变


更改为：

#leftSide{
    background-color: red;
    width: 50%;
    height: 500px;
    display:inline-block;
}
#rightSide{
    width: 50%;
    height: 500px;
    background-color: green;
    float: right;
    display:inline-block;
}

尽量不要使主容器的高度高于其他容器：

#mainContainer{
        background-color: #FFFFFF;
        max-width: 95%;
        **height: 900px;**
        margin: 0 auto;
        box-shadow:10px 10px 5px red;
        margin-top: 50px;
    }

您应该指定容器的宽度，然后使用“最大/最小宽度”覆盖它

试试看

检查它，你的主容器不能容纳高度为900px的内容物也使用“宽度：x”而不是“最大宽度：x”。这就是为什么你的部门没有display@Alexander您应该使用“最大宽度”覆盖指定的
宽度
。所以请准确地指定宽度，就像Pilot说的，需要指定一个宽度才能使最大宽度工作，我不认为高度与我的问题无关。谢谢你，你确定吗？它为我解决了这个问题。我不这么认为，你应该检查其他程序员的其他解决方案：）谢谢，现在它更有意义了。@Alexander为什么你一直在更改被接受的答案？我首先接受了飞行员的答案，我希望我也能给你评分，因为你的答案也很有效。对不起，亲爱的
body {
    background-color: green;
    box-sizing: border-box;
    margin:0;
    padding:0;
}

#mainContainer {
    background-color: blue;
    width: 95%;
    height: 900px;
    margin: 0 auto;
    box-shadow:10px 10px 5px grey;
    margin-top: 50px;
}

#leftSide {
    background-color: yellow;
    width: 40%;    
    height: 900px;
    float: left;
}

#rightSide {
    width: 60%;
    height: 900px;
    background-color: red;
    float: left;
}