Question

我可以将页面分成一个顶部（50％高度，宽度= 100％）和两个底部列（50％高度，50％宽度）。我试过但没有成功......

    <html>
   <head>
   <title>CSS devide window into three (horizontal, 2 vertical )</title>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
   <style type="text/css" media="screen"> 
.wrapM {
    width: 100%;
    height: 100%x;
     padding:2px;
}
.wrapT {
    width: 100%;
    height: 50%;    
    padding:2px;
}
.wrapB {
    width: 100%;
    height: 50%;    
    padding:2px;
}
.wrapl {
    width: 50%;
    height: 100%;    
    padding:2px;
}

.wrapr {
    width: 50%;
    height: 100%;    
    padding:2px;
}



   </style>
   </head>
   <body>
   <div class="wrapM">
    <div class="wrapT">Hello World This is upper Content</div>
       </div>
    <div class="wrapB">
    <div class="wrapl">Hello World This is bottom LEFT Content</div>
    <div class="wrapr">Hello World This is bottom right Content</div>
   </div>
   </body>
 </html>

Answer 1

为了.wrapB1和.wrapB2并排，他们应float: left。但这还不够，因为填充。添加box-sizing: border-box以解决此问题。

要获得50％的高度，html和body应设置为100%高度。此外，height .wrap规范中存在语法错误。

查看https://jsfiddle.net/sgtb00nt/以查看有效版本。我还修复了<div> s的错误嵌套。

将html页面拆分为行和列

1 个答案: