将html页面拆分为行和列

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

<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>

来源

2016-07-02 Shahgee

要并排获得.wrapB1和.wrapB2的一面，他们应该float: left。但这是不够的，因为填充。添加box-sizing: border-box以修复此问题。

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

看看https://jsfiddle.net/sgtb00nt/看到一个工作版本。我也修复了错误的嵌套<div> s。

来源

2016-07-02 11:58:39

@ Joachim Schirrmacher我想单击顶部（.wrapT）..它应该打开任何页面，例如.wrapl中的youtube。双击.wrapl或.wrapT，它应该打开另一个页面，如谷歌等，在新的寡妇。任何想法？ – Shahgee

绑定一个'click'处理程序。但你应该为此创造另一个问题。 –

将html页面拆分为行和列

回答

相关问题