当前位置：首页 → 问答吧 → 三行两列全屏布局怎么做？

三行两列全屏布局怎么做？

时间：2011-04-18

来源：互联网

根据浏览器窗口最大化时的宽度和高度布局！

作者: itinfm 发布时间: 2011-04-18

先获取屏幕宽度
然后用float 浮动就可可以

作者: tai_zi_ye 发布时间: 2011-04-18

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
html,body { width:100%; height:100%; padding:0; margin:0; }
#R1, #R3  { width:100%; height:25%; }
#R2          { width:100%; height:49%; }
#R1 div, #R2 div, #R3 div { border:1px solid #900; float:left; }

#R1C1, #R2C1, #R3C1 { width:40%; height:100%; background-color:#CCC; }
#R1C2, #R2C2, #R3C2 { width:59%; height:100%; background-color:#FFC; }
</style>
</head>

<body>
<div id="R1">
    <div id="R1C1"></div>
    <div id="R1C2"></div>
</div>
<div style="clear:both;"></div>

<div id="R2">
    <div id="R2C1"></div>
    <div id="R2C2"></div>
</div>
<div style="clear:both;"></div>

<div id="R3">
    <div id="R3C1"></div>
    <div id="R3C2"></div>
</div>
<div style="clear:both;"></div>
</body>
</html>

作者: T5500 发布时间: 2011-04-18

引用 2 楼 t5500 的回复:
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-eq……

very good

作者: itinfm 发布时间: 2011-04-18

学习了

作者: LongBless 发布时间: 2011-04-18

三行两列全屏布局怎么做？

热门阅读

热门下载