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

问题描述：

我最近的一个项目包括使用两个彼此相邻的集装箱。当一个按钮被按下时，我想要内容容器（基本上是一个假身体）来减少它的宽度和菜单容器能够移入。尽管计算宽度，滑动的集装箱移动

我似乎主要是让它工作，虽然过渡可以没有一些JS汤姆 - 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; 
}

答

很明显。主要和旁边是在两个不同的行。

我做了一个代码的变体; 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; 
}

我希望这会帮助的东西。

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

相关推荐