htmlページを行と列に分割

こんにちは、ページを1つの上部（高さ50％、幅100％）と下部の2つの列（高さ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>の間違ったネスティングを修正しました。

出典

2016-07-02 11:58:39

@ Joachim Schirrmacherトップ部分（.wrapT）をクリックしたいと思います。たとえば、.wraplのどのページでも開く必要があります。 .wraplまたは.wrapTをダブルクリックすると、新しいウィジェットにgoogleなどと呼ばれる他のページが開きます。何か案が？ – Shahgee

'click'ハンドラをバインドします。しかし、別の質問を作成する必要があります。 –

htmlページを行と列に分割

答えて

関連する問題