HTML 상자가 제대로 표시되지 않습니다.

Question

두 개의 div 상자가 서로 나란히 있고 백분율과 동일한 높이를 가지므로 크기가 다른 두 개의 서로 다른 화면에 올바르게 표시됩니다.

코드를 실행할 때 sceens 크기가 다른 것처럼 보입니다. 여기

내 코드입니다 :

<a href="https://unesco.csod.com/catalog/SearchAdvanced.aspx?dept_id=538"> 
<div style="border-radius: 25px; width: 40%; height: 56%; text-align: center; color: #ffffff; margin-left: 7%; display: inline-block; background-color: #80b280; flat: left;"><strong><span style="padding-top: 20px; font-size: 20px;"><br /> 
IT Training Resources</span><br /> 
</strong> 
<br /> 
<span style="font-size: 13px;"><font face="Tahoma">A comprehensive resource page which includes video tutorials on a variety of Microsoft products<br /> 
</font> 
</span></div> 
</a> 
<a href="https://unesco.csod.com/catalog/SearchAdvanced.aspx?dept_id=533"> 
<div style="border-radius: 25px; width: 40%; height: 56%; text-align: center; color: #ffffff; margin-right: 7%; float: right; display: inline-block; background-color: #5cadff;"><strong><span style="font-size: 20px; margin-top: 20%;"> 
<br /> 
Career Tutorials Library</span> 
</strong> 
<br /> 
<br /> 
<span style="font-size: 13px;"><font face="Tahoma">Rapid courses for all staff to move ahead in their career</font><br /> 
</span></div> 
</a> 

그리고 여기에 바이올린입니다 : http://jsfiddle.net/eKpF9/

Answer 1

당신은 "글로벌"DIV 브라우저 있도록 정의 된 높이가 다른 두 div의를 포함하는이 필요합니다 그 가치의 백분율을 할 수 있습니다.

<div style="height:500px"> 
    rest if your code 
</div> 

당신이 다음 화면의 높이를 얻기 위해 자바 스크립트 속성 screen.height을 사용할 수 있습니다 사업부에 고정 된 높이를 정의하지 않으려면

는 사업부의 높이를 가지고있다.

Answer 2

쉬운 peasy : 오른쪽 상자에는 br가 적습니다. 떠 다니는 요소에는 높이가 없습니다. 또한 한 번 실수로 철자 오류가 발생했습니다.