日期:2014-05-17  浏览次数:20542 次

各位兄弟指点一下,div定位的问题,谢谢
http://im.qq.com/qq/dlqq.shtml中最下面那个 "官方授权网站下载 "的蓝色框内显示为两列,我复制它的这段的源码新建一页面,为什么却只能单列显示,不能象该网页中那样两列显示?
标题 "官方授权网站下载 "颜色为蓝色,背景有底色,下面的内容又可以分为两列显示,请问这样该怎么做才能实现呢?
请各位兄弟帮忙一下,可否帮我做一个这样的样例网页文件学习一下?我不是很懂CSS,能否不用外链的样式文件,用内嵌在代码的样式可以吗?的非常感谢您!


------解决方案--------------------
嗯,你仔细看他的源代码,使用了class来指定样式,你需要把这个页面的css文件也下载回来才可以。所以只下载源码是不能实现同样的效果的。
你只需要在你下载的代码的 <head> 的 <style> 里加入一下的代码:
ul.left{
float: left;
}
ul.right{
float: right;
}
然后就可以看到同样的两栏效果了。
我没有测试这个,大概应该是这样的
或者你直接看一下这个例子:

<html>
<head>
<style>
ul.left{
float: left;
}
ul.right{
float: right;
}
div.test{
float: left;
width: 400px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class= "test ">
<ul class= "left ">
<li> www.left.com </li>
<li> www.left.com </li>
</ul>
<ul class= "right ">
<li> www.right.com </li>
<li> www.right.com </li>
</ul>
</div>
</body>
</html>