儘管計算寬度，滑動的集裝箱移動

我最近的一個項目包括使用兩個彼此相鄰的集裝箱。當一個按鈕被按下時，我想要內容容器（基本上是一個假身體）來減少它的寬度和菜單容器能夠移入。儘管計算寬度，滑動的集裝箱移動

我似乎主要是讓它工作，雖然過渡可以沒有一些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; 
}

來源

2016-09-06 Crowes

很明顯。主要和旁邊是在兩個不同的行。

我做了一個代碼的變體; 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; 
}

我希望這會幫助的東西。

來源

2016-09-06 08:37:16

儘管計算寬度，滑動的集裝箱移動

回答

相關問題