【CSS相关】个满屏品字布局如何设计?（约142字）-IT面试吧

一个满屏品字布局如何设计?

要实现一个满屏的"品"字布局，可以采用以下方法：

HTML 结构：

    <div class="container">
      <div class="top"></div>
      <div class="middle"></div>
      <div class="bottom"></div>
    </div>

CSS 样式：

    .container {
      width: 100%;
      height: 100vh; /* 或者使用 height: 100% */
    }
    
    .top, .middle, .bottom {
      width: 50%;
      height: 50vh; /* 或者使用 height: 50% */
      float: left; /* 或者使用 display: inline-block; */
    }
    
    .top {
      background-color: red; /* 设置上方区域的背景色 */
    }
    
    .middle {
      background-color: white; /* 设置中间区域的背景色 */
    }
    
    .bottom {
      background-color: blue; /* 设置下方区域的背景色 */
    }