柔性箱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

谢谢你的帮助！ :) :) –

柔性箱Dilema

回答

相关问题