Question

我正在尝试学习CSS而且我遇到了这个问题我现在已经困住了几个小时。我还没修过它。你能帮忙吗？

我想要第二个最低的容器＆＃39;坚持中右集装箱。

以下是JSFiddle链接 -

下面是HTML

<body>
        <div class="MainContainer">
            <div class="UpperMostContainer">
                UpperMostContainer
            </div>
            <div class="RightLeftContainers">
                <div class="MiddleLeftContainer">
                    Middle Left Container
                </div>
                <div class="MiddleRightContainer">
                    Middle Right Container
                </div>
            </div>
            <div class="LowerMostContainer">
                Lower Most Container
            </div>
            <div class="SecondLowerMostContainer">
                Second Lower most Container
            </div>
        </div>
    </body>

下面是CSS

.MainContainer {
    width: 1000px;
    height: 500px;
    background-color: blue;
    margin: auto auto;
    padding: 10px;
}

.UpperMostContainer {
    width: 1000px;
    height: 100px;
    background-color: green;
}

.MiddleLeftContainer {
    width: 50%;
    height: 150px;
    background-color: gray;
    float: left;
}

.MiddleRightContainer {
    width: 50%;
    height: 100px;
    background-color: red;
    float: right;
}

.LowerMostContainer {
    height: 250px;
    width: 50%;
    background-color: green;
    float: left;
    clear: left;
}

.SecondLowerMostContainer {
    width: 50%;
    height: 300px;
    background-color: purple;
    clear: right;
    float: right;
}

Answer 1

嗯，唯一的正确的解决方案是使用flexbox - a-guide-to-flexbox，其他任何内容都会被视为 hacky 。

我的一般建议是根本不使用负边距。如果您在没有其他选择的情况下陷入困境，请考虑更改整个html结构。当您的结构变得复杂并且许多元素相互依赖时，您将面临许多不一致和浏览器怪癖。

此article将为您提供有关如何使用浮动的更多见解。清除浮动可以提供这种确切的行为。

如何将第二低集装箱推到中右集装箱的正下方？

1 个答案: