Css用DIV页面布局（按照比例划分)宽高如何设置？

5回答

动漫人物

自适应高度么?

呼啦一阵风

下面两块就不用说了吧，就是有高度的div上边那个或者把1左浮动。或者把23右浮动。父级清一下浮动就可以了。这没啥难度吧。

回首忆惘然

<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> *{ padding: 0; margin: 0; } body{ display: grid; grid-template-areas: 'first second' 'first thrid' 'four four' 'five five'; grid-template-rows: 10vh 10vh 60vh 20vh; grid-auto-columns: 200px 1fr; } div:nth-of-type(1){ grid-area: first; background: red; } div:nth-of-type(2){ grid-area: second; background: yellow; } div:nth-of-type(3){ grid-area: thrid; background: green; } div:nth-of-type(4){ grid-area: four; background: yellow; } div:nth-of-type(5){ grid-area: five; background: green; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <script> </script> </body> </html>

噜噜哒

.flexBox { display: -webkit-flex; display: flex; height: 400px; -webkit-flex-direction: column; flex-direction: column; } .topBox { position: relative; -webkit-flex: 0 0 20%; flex: 0 0 20%; } .topFlexBox { position: absolute; display: -webkit-flex; display: flex; width: 100%; height: 100%; background-color: #000; } .first { -webkit-flex: 0 0 20%; flex: 0 0 20%; background-color: #3781B5; } .secondBox { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; height: 100%; -webkit-flex: 0 0 80%; flex: 0 0 80%; } .second { -webkit-flex: 0 0 50%; flex: 0 0 50%; background-color: #13C723; } .third { -webkit-flex: 0 0 50%; flex: 0 0 50%; background-color: #E33728; } .fourth { -webkit-flex: 0 0 60%; flex: 0 0 60%; background-color: #E3E13B; } .fifth { -webkit-flex: 0 0 20%; flex: 0 0 20%; background-color: #9DE3CC; } <div class="flexBox"> <div class="topBox"> <div class="topFlexBox"> <div class="first"></div> <div class="secondBox"> <div class="second"></div> <div class="third"></div> </div> </div> </div> <div class="fourth"></div> <div class="fifth"></div> </div> codePen修改了一下，chrome、搜狗、iPhone都可以正常显示了