html 페이지를 행과 열로 나누십시오.

안녕하세요 한 페이지 (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을 붙이십시오.

높이를 높이려면 html 및 body을 100% 높이로 설정해야합니다. 또한 height 사양에 구문 오류가 있습니다 (.wrap).

작동 버전을 보려면 https://jsfiddle.net/sgtb00nt/을보십시오. 나는 또한 <div> s의 잘못된 중첩을 수정했습니다.

출처

2016-07-02 11:58:39

@ Joachim Schirrmacher 상단 부분 (.wrapT)을 클릭하고 싶습니다. 예를 들어, .wrapl의 모든 페이지가 열립니다. .wrapl 또는 .wrapT를 두 번 클릭하면 새 widow에 google 등 다른 페이지가 열립니다. 어떤 생각? – Shahgee

'click' 핸들러를 바인드합니다. 그러나 그것에 대한 또 다른 질문을 만들어야합니다. –

html 페이지를 행과 열로 나누십시오.

답변

관련 문제