Question

我最近的一个项目包括彼此相邻使用两个容器。当按下一个按钮时，我希望内容容器（基本上是一个假身体）减少它的宽度，并且菜单容器能够移入。

我似乎主要是让它发挥作用，但如果没有一些JS tom-foolery（这实际上会使美学无效），过渡就无法实现。在最右边（菜单大部分时间的区域），菜单向下移动，但没有边距。

这对我来说毫无意义，并且添加任何数量的翻译或减少任何容器的宽度似乎都可以解决它。我错过了什么吗？

HTML

<body>
    <main>
        <p>Container.</p>
    </main>
    <aside>
        <p>Menu.</p>
    </aside>
</body>

CSS

body {
    padding: 0;
    margin: 0;
}
main {
    float: left;
    border: 1px solid black;
    transform: translate(0px, 0px);
    width: 100%;
}
aside {
    float: right;
    border: 1px solid red;
    transform: translate(450px, 0px);
    width: 450px;
}

Answer 1

很明显。主要和旁边分为两个不同的行。

我制作了一些代码变体; p。

HTML：

<body>
<section>
    <main>
        <p>Container.</p>
    </main>
    <aside>
        <p>Menu.</p>
    </aside>
</section>

CSS：

body {
    padding: 0;
    margin: 0;
}
main {
    float: left;
    border: 1px solid black;
    transform: translate(0px, 0px);
    width: calc(100% - 454px);
    display: inline-block;
}
aside {
    float: left;
    display: inline-block;
    border: 1px solid red;
    width: 450px;
}
section {
    display: inline-block;
    width: calc(100% + 450px);
    float: left;
}

我希望这会有所帮助。

尽管计算宽度，滑动集装箱仍会移动

1 个答案: