实现一个简单的两列布局
要求：
1、外容器满屏显示，填充颜色为#000；包含两列；
2、第一列：固定宽度，假设宽度为：300px；颜色为#ff0000;左右外间距各为10px;
3、第二列：自适应屏幕，并将整个屏幕剩余宽度填满，填充颜色：#0000ff;
4、两列随着高度变化互不影响，兼容各种浏览器、显示器、分辨率。
方案：
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="editplus" name="generator" />
<meta content="" name="author" />
<meta content="" name="keywords" />
<meta content="" name="description" />
<style type="text/css">
/*<![CDATA[*/
body{margin:0;padding:0;}
#left{width:300px; margin:auto 10px; _display:inline; background-color:#ff0000; float:left; }
#right{ margin:auto auto auto 320px; background-color:#0000ff; }
/*]]>*/
</style>
</head>
<body>
<div id="left">left</div>
<div id="right">
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right
</div>
</body>
</html>
—————————————————————-
之前在工作中遇到的一个问题，发到蓝色后得到很多朋友的帮忙得以解决。今天又看到了，发出来在学习一遍，感谢各位朋友的支持！
发表评论
| Trackback