柔性箱Dilema

-2

我一直在一個網站左側流行打開導航欄。我知道我的內容是用flex-box和wrap包裝的，但是我的#main部分不會在導航欄打開並且脫離我的頁面時打包。任何人都可以幫助我，因爲我對CSS3超級新手。柔性箱Dilema

代碼（HTML）：

<!DOCTYPE html> 

<html> 
<head> 

<link rel="stylesheet" type="text/css" href="style.css"> 
<script type="text/javascript" src="nav.js"></script> 

</head> 

<body> 

<nav id="mySidenav" class="sidenav"> 
    <a href="javascript:void(0)" class="closebtn" 
    onclick="closeNav()">&times;</a> 
    <a href="#">About</a> 
    <a href="#">Services</a> 
    <a href="#">Contact</a> 
</nav> 

<section id="main"> 
    <span style="font-size:30px;cursor:pointer" 
    onclick="openNav()">&#9776;</span> 
    <br> 
    <section class="box-container"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    </section> 
</section> 

</body> 
</html>

碼（CSS）：

* { 
box-sizing: border-box; 
} 

body { 
font-family: arial; 
} 

.sidenav { 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: #111; 
    overflow-x: hidden; 
    transition: 0.5s; 
    padding-top: 60px; 
} 

.sidenav a { 
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: 25px; 
    color: #818181; 
    display: flex; 
    flex-wrap: wrap; 
    transition: 0.3s; 
} 

.sidenav a:hover, .offcanvas a:focus{ 
    color: #f1f1f1; 
} 

.sidenav .closebtn { 
    position: absolute; 
    top: 0; 
    right: 15px; 
    font-size: 26px; 
    margin-left: 30px; 
} 

/* PROBLEM ARIA */ 

#main { 
    transition: margin-left .5s; 
    padding: 16px; 
    display: flex; 
    flex-flow: wrap; 
    width: auto; 
    /*float: left;*/ 
} 

.box { 
    text-align: center; 
    width: calc(33.33% - 20px); 
    height: 280px; 
    margin: 10px; 
    background-color: black; 
} 

.box-container { 
    padding: 25px; 
    min-width: 97vw; 
    display: flex; 
    flex-wrap: wrap; 
    background-color: white; 
    margin: auto; 
}

來源

2017-06-04 Marno Lotz

尋求幫助的問題（「**爲什麼不是，或者如何使這個代碼工作？」）必須包含所需的行爲，_specific問題或錯誤以及必需的**最短代碼** _ to在問題本身**中重現它**。沒有**明確問題陳述**的問題對其他讀者沒有用處。請參閱：[如何創建最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve）。 – LGSon

如果沒有，我們只能在HTML代碼根據你發佈的圖片猜測，但它似乎是你的.sidenav是flex容器的一部分，這就是爲什麼當它變得可見時它會移動其餘的東西。

只需將您的.sidenav從柔性容器（#main）中取出並讓它獨立於柔性材質。

來源

2017-06-04 13:52:45 Johannes

我真的不明白爲什麼要回答這樣一個不完整的問題....並且答案僅僅是一個猜測，對於其他用戶來說只有很少的值（如果有的話） – LGSon

謝謝你的幫助！ :) :) –

回答

相關問題