html - 使用 vw 创建两个元素以创建 100vw 不起作用

Question

<分区>

Answer 1

Switch to flexbox model :

 <div style="display:flex">
     <div style="background:black; height:100vh; width:50vw; display:inline-block;">50vw</div>
     <div style="background:red; height:100vh; width:50vw;display:inline-block;">50vw</div>
 </div>  

最初的浏览器布局疯狂有一个方法，你只需要记住它。就个人而言，我发现 flexbox 模型更符合我对布局的“思维方式”，所以我更常使用它。 Here's a cheat sheet对于常见用例，尤其是。并排情况。