标题:div+css如何布局动态页
只看楼主
mony1000
Rank: 1
等 级:新手上路
帖 子:4
专家分:0
注 册:2010-10-15
结帖率:0
已结贴  问题点数:20 回复次数:3 
div+css如何布局动态页
我想显示两行三列的数据,不想用表格,如何用div+css来布局啊,例如用<li></li>
搜索更多相关主题的帖子: div css 动态 
2010-10-31 11:39
towering
Rank: 7Rank: 7Rank: 7
等 级:黑侠
威 望:1
帖 子:261
专家分:507
注 册:2007-10-9
得分:10 
看我的小站的“业内新闻”和“专题教程”两个栏目。
虽然我的CSS对IE不太好,
但是你可以参考一下。

我的ASP小站:http://www./
2010-10-31 19:09
gupiao175
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:40
帖 子:1787
专家分:7527
注 册:2007-6-27
得分:10 
<!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比较好些!

Q:1428196631,百度:开发地 即可找到我,有事请留言!
2010-11-01 09:57
gupiao175
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:40
帖 子:1787
专家分:7527
注 册:2007-6-27
得分:0 
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>

Q:1428196631,百度:开发地 即可找到我,有事请留言!
2010-11-01 10:16



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-324532-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.190767 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved