【div+css】 新手求助怎么做如下图效果？
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body { margin:0px; padding:0px; font-size:13px; color:#3A3A3A}
form,ul,dl,dt,dd,h1{ margin:0px; padding:0px}
ul { list-style:none;}
#question_top1{ height:224px; border:1px solid #97c614; margin-bottom:15px;}
#question_top1 h1{ font-size:14px; height:25px ; background-color:#EBF9EA; padding-
left:20px; line-height:25px}
.fenlei1{line-height:25px; float:left; width:200px; }
.fenlei1 dl dt{ font-size:14px; color:#000; font-weight:bold;}
</style>
</head>
<body><div id="question_top1">
<h1>问题分类</h1>
<div class="fenlei1">
<dl>
<dt>票务交通</dt>
<dd>特价机票</dd>
<dd>航空知识</dd>
<dd>乘机常识</dd>
<dd>代理网站</dd>
<dd>用户投诉</dd>
<dd>机票预订</dd>
<dd>登机常识</dd>
<dd>航空公司</dd>
<dd>火车巴士</dd>
</dl>
</div>
<div class="fenlei1">
<dl>
<dt>找酒店</dt>
<dd>酒店优惠</dd>
<dd>酒店集团</dd>
<dd>酒店知识</dd>
<dd>酒店问答</dd>
</dl>
</div>
<div class="fenlei1">
<dl>
<dt>去哪儿玩</dt>
<dd>景点信息</dd>
<dd>旅游交通</dd>
<dd>线路攻略</dd>
<dd>美食特产</dd>
<dd>购物消费</dd>
<dd>风俗文化</dd>
<dd>跟团游</dd>
<dd>自助游</dd>
<dd>自驾租车</dd>
<dd>户外探险</dd>
<dd>旅游其他</dd>
<dd>护照</dd>
<dd>签证</dd>
<dd>港澳通行证</dd>
</dl>
</div>
</div>
</body>
</html>
我自己写的，可是不能居中，超过div高度的文字也不能换列显示，是不是只有ul才能实现，求指点，谢谢 展开
"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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body { margin:0px; padding:0px; font-size:13px; color:#3A3A3A}
form,ul,dl,dt,dd,h1{ margin:0px; padding:0px}
ul { list-style:none;}
#question_top1{ height:224px; border:1px solid #97c614; margin-bottom:15px;}
#question_top1 h1{ font-size:14px; height:25px ; background-color:#EBF9EA; padding-
left:20px; line-height:25px}
.fenlei1{line-height:25px; float:left; width:200px; }
.fenlei1 dl dt{ font-size:14px; color:#000; font-weight:bold;}
</style>
</head>
<body><div id="question_top1">
<h1>问题分类</h1>
<div class="fenlei1">
<dl>
<dt>票务交通</dt>
<dd>特价机票</dd>
<dd>航空知识</dd>
<dd>乘机常识</dd>
<dd>代理网站</dd>
<dd>用户投诉</dd>
<dd>机票预订</dd>
<dd>登机常识</dd>
<dd>航空公司</dd>
<dd>火车巴士</dd>
</dl>
</div>
<div class="fenlei1">
<dl>
<dt>找酒店</dt>
<dd>酒店优惠</dd>
<dd>酒店集团</dd>
<dd>酒店知识</dd>
<dd>酒店问答</dd>
</dl>
</div>
<div class="fenlei1">
<dl>
<dt>去哪儿玩</dt>
<dd>景点信息</dd>
<dd>旅游交通</dd>
<dd>线路攻略</dd>
<dd>美食特产</dd>
<dd>购物消费</dd>
<dd>风俗文化</dd>
<dd>跟团游</dd>
<dd>自助游</dd>
<dd>自驾租车</dd>
<dd>户外探险</dd>
<dd>旅游其他</dd>
<dd>护照</dd>
<dd>签证</dd>
<dd>港澳通行证</dd>
</dl>
</div>
</div>
</body>
</html>
我自己写的，可是不能居中，超过div高度的文字也不能换列显示，是不是只有ul才能实现，求指点，谢谢 展开
3个回答
展开全部
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{ margin:0px; padding:0px; font-size:13px; color:#3A3A3A; text-align:center;}
#question_top1{width:800px;margin:0 auto;border:1px solid #97c614;margin-top:20px; overflow:hidden;padding-bottom:10px;}
h1{font-size:14px;background-color:#EBF9EA;height:25px;line-height:25px;padding:0px;margin:0px;text-align:left;padding-left:10px;}
.fenlei1{float:left;width:260px;border-right:#ddd 1px dashed; overflow:hidden;margin-top:10px;height:222px;}
.fenlei1 dl{margin:0px;padding:0px;list-style-type:none;width:260px;}
.fenlei1 dl dt{font-size:14px; color:#000; font-weight:bold;width:260px;line-height:50px;}
.fenlei1 dl dd{width:90px;float:left; text-align:left;line-height:25px;margin:0px;padding-left:35px;}
.fl dl dd{width:260px;text-align:center;padding:0px;}
.fl02{border:none;}
</style>
</head>
<body>
<div id="question_top1">
<h1>问题分类</h1>
<div class="fenlei1">
<dl>
<dt>票务交通</dt>
<dd>特价机票</dd>
<dd>航空知识</dd>
<dd>乘机常识</dd>
<dd>代理网站</dd>
<dd>用户投诉</dd>
<dd>机票预订</dd>
<dd>登机常识</dd>
<dd>航空公司</dd>
<dd>火车巴士</dd>
</dl>
</div>
<div class="fenlei1 fl">
<dl>
<dt>找酒店</dt>
<dd>酒店优惠</dd>
<dd>酒店集团</dd>
<dd>酒店知识</dd>
<dd>酒店问答</dd>
</dl>
</div>
<div class="fenlei1 fl02">
<dl>
<dt>去哪儿玩</dt>
<dd>景点信息</dd>
<dd>旅游交通</dd>
<dd>线路攻略</dd>
<dd>美食特产</dd>
<dd>购物消费</dd>
<dd>风俗文化</dd>
<dd>跟团游</dd>
<dd>自助游</dd>
<dd>自驾租车</dd>
<dd>户外探险</dd>
<dd>旅游其他</dd>
<dd>护照</dd>
<dd>签证</dd>
<dd>港澳通行证</dd>
</dl>
</div>
</div>
</body>
</html>
这个就可以实现那样的效果了，单前提是你里面的项不经常改动
"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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{ margin:0px; padding:0px; font-size:13px; color:#3A3A3A; text-align:center;}
#question_top1{width:800px;margin:0 auto;border:1px solid #97c614;margin-top:20px; overflow:hidden;padding-bottom:10px;}
h1{font-size:14px;background-color:#EBF9EA;height:25px;line-height:25px;padding:0px;margin:0px;text-align:left;padding-left:10px;}
.fenlei1{float:left;width:260px;border-right:#ddd 1px dashed; overflow:hidden;margin-top:10px;height:222px;}
.fenlei1 dl{margin:0px;padding:0px;list-style-type:none;width:260px;}
.fenlei1 dl dt{font-size:14px; color:#000; font-weight:bold;width:260px;line-height:50px;}
.fenlei1 dl dd{width:90px;float:left; text-align:left;line-height:25px;margin:0px;padding-left:35px;}
.fl dl dd{width:260px;text-align:center;padding:0px;}
.fl02{border:none;}
</style>
</head>
<body>
<div id="question_top1">
<h1>问题分类</h1>
<div class="fenlei1">
<dl>
<dt>票务交通</dt>
<dd>特价机票</dd>
<dd>航空知识</dd>
<dd>乘机常识</dd>
<dd>代理网站</dd>
<dd>用户投诉</dd>
<dd>机票预订</dd>
<dd>登机常识</dd>
<dd>航空公司</dd>
<dd>火车巴士</dd>
</dl>
</div>
<div class="fenlei1 fl">
<dl>
<dt>找酒店</dt>
<dd>酒店优惠</dd>
<dd>酒店集团</dd>
<dd>酒店知识</dd>
<dd>酒店问答</dd>
</dl>
</div>
<div class="fenlei1 fl02">
<dl>
<dt>去哪儿玩</dt>
<dd>景点信息</dd>
<dd>旅游交通</dd>
<dd>线路攻略</dd>
<dd>美食特产</dd>
<dd>购物消费</dd>
<dd>风俗文化</dd>
<dd>跟团游</dd>
<dd>自助游</dd>
<dd>自驾租车</dd>
<dd>户外探险</dd>
<dd>旅游其他</dd>
<dd>护照</dd>
<dd>签证</dd>
<dd>港澳通行证</dd>
</dl>
</div>
</div>
</body>
</html>
这个就可以实现那样的效果了，单前提是你里面的项不经常改动
追问
你好！ 就是你写的这种效果，不过我想问下我那种写法是不是挺麻烦，最简便的方法是不是用ul？
追答
不会，我就是在你的基础上改的，你这种方式就可以了，只是你在样式上要加强
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
DIV固定好宽高，然后下面<ul><li></li></ul>
li 左浮动，因为有宽限制，每行显示两个，然后换行显示，可以达到两列的效果，可以看参考页面的产品列表效果
li 左浮动，因为有宽限制，每行显示两个，然后换行显示，可以达到两列的效果，可以看参考页面的产品列表效果
参考资料： http://www.guipumuye.com/?hongmujiaju/
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
楼上的说的对！！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
