注册 登录
编程论坛 → ASP技术论坛

div+css如何布局动态页

mony1000 发布于 2010-10-31 11:39， 708 次点击
我想显示两行三列的数据，不想用表格，如何用div+css来布局啊，例如用<li></li>
3 回复
#2
towering2010-10-31 19:09
看我的小站的“业内新闻”和“专题教程”两个栏目。
虽然我的CSS对IE不太好，
但是你可以参考一下。
#3
gupiao1752010-11-01 09:57
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>3/2</title>
<style type="text/css">
body { font-family:Verdana; font-size:14px; margin:10 auto;}
#container {margin:0 auto; width:900px;}
#mainContent { height:100px; margin-bottom:5px;}
#sidebar { float:left; width:295px; margin-right:5px;height:100px; background:#9ff;}

</style>
</head>

<body>
<div id="container">
  <div id="mainContent">
    <div id="sidebar">This is the sidebar</div>
    <div id="sidebar">This is the sidebar</div>
    <div id="sidebar">This is the sidebar</div>
  </div>
  <div id="mainContent">
    <div id="sidebar">This is the sidebar</div>
    <div id="sidebar">This is the sidebar</div>
    <div id="sidebar">This is the sidebar</div>
  </div>
</div>
</body>
</html>
这个，其实如果楼主要显示的是纯数据的话，我建议还是用table，DIV+CSS是布局方面有优势，但是并没有让人放弃TABLE的使用！所以数据显示方面还是继续沿用table比较好些！
#4
gupiao1752010-11-01 10:16
LI的会更简单些，可以这样：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>3/2</title>
<style type="text/css">
body { font-family:Verdana; font-size:14px; margin:10 auto;}
#container {margin:0 auto; width:900px;}
#container ul{width:900px;list-style-type:none;}
#container ul li{background:#9ff;float:left;width:290px;height:100px;margin-left:5px;margin-bottom:5px}

</style>
</head>

<body>
<div id="container">
    <ul>
    <li>this is li1</li>
    <li>this is li1</li>
    <li>this is li1</li>
    <li>this is li2</li>
    <li>this is li2</li>
    <li>this is li2</li>
    </ul>
  </div>
</body>
</html>
1
©2025, BC-CN.NET
电脑版