zoukankan      html  css  js  c++  java
  • css笔记:如何将一个页面平均分成四个部分?

    今天,我在刷面试题的时候,突然想到一道题:如何将一个页面平均分成四个部分(div)呢?其实难度也不大,于是直接上代码

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>将页面平均分成四部分</title>
     6     <style type="text/css">
     7         *{
     8             margin: 0;
     9             padding: 0;
    10         }
    11         .main{
    12             width: 100%;
    13             height: 100%;
    14             position: absolute;
    15         }
    16         .quarter-div{
    17             width: 50%;
    18             height: 50%;
    19             float: left;
    20         }
    21         .blue{
    22             background-color: #5BC0DE;
    23         }
    24         .green{
    25             background-color: #5CB85C;
    26         }
    27         .orange{
    28             background-color: #F0AD4E;
    29         }
    30         .yellow{
    31             background-color: #FFC706;
    32         }
    33     </style>
    34 </head>
    35 <body>
    36     <div class="main">
    37         <div class="quarter-div blue"></div>
    38         <div class="quarter-div green"></div>
    39         <div class="quarter-div orange"></div>
    40         <div class="quarter-div yellow"></div>
    41     </div>
    42 </body>
    43 </html>

    效果图如上。从代码上看,就是先确定一个占满全屏的div,并设置其position:absolute,而它的四个子div由于左浮动便自动浮动到相应的位置。除了这种方法,当然还有其他的方法可以解决,如果用css无非还是position的absolute和relative,如果用js解决这种布局的小问题就显得大材小用了。如果各位面试的时候遇到希望能够有用!

  • 相关阅读:
    Qt添加程序图标
    QTcpSocket+QTcpServer+QWebEngineView打造简易聊天室
    Qt聊天室
    QThread+QMutex多线程编程
    Qt设置窗体背景渐变
    Could not resolve host: github.com
    git clone某一分支上的内容
    git基本操作
    C++中的static关键字的总结
    C/C++中static关键字作用总结
  • 原文地址:https://www.cnblogs.com/gxsweb/p/5387651.html
Copyright © 2011-2022 走看看