我已将div输入到容器{display:flex}中。一旦我摆脱了display:flex,它就可以正常工作,并且我可以看到我的html。另外我发现,如果将百分比更改为px,则可以查看我的页面。
为什么是这样 ?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
margin-top: .2%;
}
#container {
display: flex;
flex-flow: row wrap;
}
#one {
float: left;
background-color: black;
width: 25%;
height: 100vh;
margin-left: 2%;
}
#two {
float: right;
background-color: grey;
width: 70.5%;
height: 100vh;
margin-right: 2%;
}
<div id="container">
<div id="row">
<div id="one"></div>
<div id="two"></div>
</div>
</div>
html, body{ height:100%;} /* not needed but good to have it */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
/*margin-top: .2%; /* why? it'll mess with vh100 adding scrollbars.. */
}
/*#container { you mean... */
#row {
display: flex;
flex-flow: row wrap;
}
#one {
/* float: left; /* unnecessary, now parent is flex */
background-color: black;
width: 25%;
height: 100vh;
margin-left: 2%;
}
#two {
/* float: right; /* unnecessary, now parent is flex */
background-color: grey;
width: /*70.5%; you mean... */ 71%;
height: 100vh;
margin-right: 2%;
}
<div id="container">
<div id="row">
<div id="one"></div>
<div id="two"></div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句