Question

我有一个主div，其中有另外两个div，我试图把内部div放在一起。我有以下代码，但我不明白为什么它不起作用。如果将浮动应用于我的内部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;
    }

Answer 1

使用display:inline-block;

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

将max-width更改为width。需要指定width才能使max-width生效。

如果设置固定宽度和最大宽度，则表示以下内容：

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

<强> Credits

更改为：

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

<强> JSFiddle Demo

Answer 2

尽量不要让#mainContainer的高度高于其他人：

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

Answer 3

您应指定容器的宽度，然后使用max / min-width覆盖它，

尝试，

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;
}

Answer 4

我简化了代码并将其转换为JSFiddle。基本上，除非非常必要，否则您不需要floats。请改用display:inline-block;。 http://jsfiddle.net/KybKc/

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

4 个答案: