如何让两个DIV并列

hewei2003 2009-04-09 04:55:54
这是一个滑动门，要求在标题旁边并列一个下来列表，现在列表被换行了
<style type="text/css">

#test1 { width: 600px; }

/* 头部总体 css */
.ntab2-head {
clear:both; height: 21px;
border-bottom: #FFFFFF 3px solid;
text-align: center;
}

/* 头部标头的 css */
.ntab2-head p {
float:left; font-size: 14px; font-weight: bold;
width: 80px; height: 21px;
}

/* 头部列表的 css */
.ntab2-head li {
float:left; background: #dcdcdc; border-left: #f2f2f2 1px solid;
width: 42px; cursor: pointer; font-size: 14px;
line-height: 21px; list-style-type: none;
}

.ntab2-head li.current {
background: #c2130e; color: #ffffff; cursor: none;
}

/* 主体内容的 css? */
.ntab2-body {
text-align: left;
}

.ntab2-body dl {
text-indent: 0px; margin: 0px; padding: 0px;
}
</style>
<script language="javascript">
function ntab2_register(id, def)
{
var obj = document.getElementById(id);
if (!obj || !obj.hasChildNodes())
{
alert('ERROR: the object was not defined for #' + id + '#');
return;
}

// get head & body object
var head = null;
var body = null;
for (var i = 0; i < obj.childNodes.length; i++)
{
var node = obj.childNodes[i];
if (node.tagName == 'DIV')
{
if (node.className == 'ntab2-head')
head = node;
else if (node.className == 'ntab2-body')
body = node;
}
}
if (!head) { alert('ERROR: head elements was not found for #' + id + '#'); return; }
if (!body) { alert('ERROR: body elements was not found for #' + id + '#'); return; }

// set action & default
var items = head.getElementsByTagName('LI');
var datas = body.getElementsByTagName('DL');
if (items.length == 0) { alert('ERROR: empty set for head elements on #' + id + '#'); return; }
if (items.length != datas.length)
{
alert('ERROR: not equal between body.length and head.length for #' + id + '#');
return;
}

var total = items.length;
if (typeof def == 'undefined') def = 0;
else def = parseInt(def)%total;
if (def < 0) def += total;
for (var i = 0; i < total; i++)
{
datas[i].style.display = (i == def ? '' : 'none');
items[i].className = (i == def ? 'current' : '');
items[i].onclick = function() {
for (var k = 0; k < total; k++)
{
datas[k].style.display = (this == items[k] ? '' : 'none');
items[k].className = (this == items[k] ? 'current' : '');
}
}
}
}
</script>

<form name="form2" method="post" action="overstock.asp">
<div id="test1">
<!-- 头部设定 -->
<div class="ntab2-head">
<p>新闻排行<p></p>
<li>国内</li>
<li>国际</li>
<li>社会</li>
<li>中国</li>
</div>
<div>
<select name="select">
<option>请选择</option>
</select>
</div>
<!-- 内容设定 -->
<div class="ntab2-body">
<dl>
国内-内容
</dl>
<dl>
国际-内容
</dl>
<dl>
社会-内容
</dl>
<dl>
中国
</dl>

</div>
</div>
</font>
<script language="javascript">ntab2_register('test1', 3);</script>


...全文
9548 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
fsfyx 2010-05-16
  • 打赏
  • 举报
 回复
对于某些js调用的广告，float:left也是无效的
特别是要将google和baidu广告并排的情况
这时候只有用土办法：
<table><tr>
<td>1</td>
<td>2</td>
</tr></table>
sun_quan 2010-05-04
  • 打赏
  • 举报
 回复
顶顶顶顶顶
smmaomao 2010-04-06
  • 打赏
  • 举报
 回复
我也看不见
aq2008qa 2010-03-08
  • 打赏
  • 举报
 回复
为什么我看不到3楼的代码？
woodyy 2010-03-04
  • 打赏
  • 举报
 回复
误导呀，误导

div style="clear:both">
<div style="float:left" class="test1">1 </div>
<div style="float:left" class="test2">1 </div>
</div>
<div style="clear:both">
<div style="float:left" class="test1">1 </div>
<div style="float:right" class="test2">1 </div>
</div>
<div style="clear:both">
<div style="display:inline;" class="test1">1 </div>
<div style="display:inline;" class="test2">1 </div>
</div>

这几个办法都不行
woailuoop 2010-01-22
  • 打赏
  • 举报
 回复
看看 怎么设置的啊
y504853214 2009-09-15
  • 打赏
  • 举报
 回复
学习学习
fh198611 2009-07-17
  • 打赏
  • 举报
 回复
FLOAT可以与Firefox兼容吗？
lyscphoenix 2009-04-09
  • 打赏
  • 举报
 回复
3楼做的很到位了，顶上去~~~
helimin19 2009-04-09
  • 打赏
  • 举报
 回复
<html>

<body>
<style type="text/css">
.test1
{
border:solid 1px red; width:100px; height:36px;text-align:center;margin:1px;
}
.test2
{
border:solid 1px blue; width:100px; height:36px;text-align:center;margin:1px;
}
</style>
<div style="clear:both">
<div style="float:left" class="test1">1</div>
<div style="float:left" class="test2">1</div>
</div>
<div style="clear:both">
<div style="float:left" class="test1">1</div>
<div style="float:right" class="test2">1</div>
</div>
<div style="clear:both">
<div style="display:inline;" class="test1">1</div>
<div style="display:inline;" class="test2">1</div>
</div>
</body>

</html>
shenzhenNBA 2009-04-09
  • 打赏
  • 举报
 回复
除了id=test1的那个DIV不动外,把其他的<div ...>都加上 style="float:left;" 变成 如下：
<div style="float:left;" (其他如果有保留)>，好象其他地方标签有点多余

完整如下：
--------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>

<style type="text/css">

#test1 { width: 600px; }

/* 头部总体 css */
.ntab2-head {
clear:both; height: 21px;
border-bottom: #FFFFFF 3px solid;
text-align: center;
}

/* 头部标头的 css */
.ntab2-head p {
float:left; font-size: 14px; font-weight: bold;
width: 80px; height: 21px;
}

/* 头部列表的 css */
.ntab2-head li {
float:left; background: #dcdcdc; border-left: #f2f2f2 1px solid;
width: 42px; cursor: pointer; font-size: 14px;
line-height: 21px; list-style-type: none;
}

.ntab2-head li.current {
background: #c2130e; color: #ffffff; cursor: none;
}

/* 主体内容的 css? */
.ntab2-body {
text-align: left;
}

.ntab2-body dl {
text-indent: 0px; margin: 0px; padding: 0px;
}
</style>
<script language="javascript">
function ntab2_register(id, def)
{
var obj = document.getElementById(id);
if (!obj || !obj.hasChildNodes())
{
alert('ERROR: the object was not defined for #' + id + '#');
return;
}

// get head & body object
var head = null;
var body = null;
for (var i = 0; i < obj.childNodes.length; i++)
{
var node = obj.childNodes[i];
if (node.tagName == 'DIV')
{
if (node.className == 'ntab2-head')
head = node;
else if (node.className == 'ntab2-body')
body = node;
}
}
if (!head) { alert('ERROR: head elements was not found for #' + id + '#'); return; }
if (!body) { alert('ERROR: body elements was not found for #' + id + '#'); return; }

// set action & default
var items = head.getElementsByTagName('LI');
var datas = body.getElementsByTagName('DL');
if (items.length == 0) { alert('ERROR: empty set for head elements on #' + id + '#'); return; }
if (items.length != datas.length)
{
alert('ERROR: not equal between body.length and head.length for #' + id + '#');
return;
}

var total = items.length;
if (typeof def == 'undefined') def = 0;
else def = parseInt(def)%total;
if (def < 0) def += total;
for (var i = 0; i < total; i++)
{
datas[i].style.display = (i == def ? '' : 'none');
items[i].className = (i == def ? 'current' : '');
items[i].onclick = function() {
for (var k = 0; k < total; k++)
{
datas[k].style.display = (this == items[k] ? '' : 'none');
items[k].className = (this == items[k] ? 'current' : '');
}
}
}
}
</script>

<form name="form2" method="post" action="overstock.asp">
<div id="test1">
<!-- 头部设定 -->
<div class="ntab2-head" style="float:left;">
<p>新闻排行</p>
<li>国内 </li>
<li>国际 </li>
<li>社会 </li>
<li>中国 </li>
</div>
<div style="float:left;">
<select name="select">
<option>请选择 </option>
</select>
</div>
<!-- 内容设定 -->
<div class="ntab2-body" style="float:left;">
<dl>
国内-内容
</dl>
<dl>
国际-内容
</dl>
<dl>
社会-内容
</dl>
<dl>
中国
</dl>
</div>
</div>
</form>
<script language="javascript">ntab2_register('test1', 3); </script>
</body>
</html>

lihan6415151528 2009-04-09
  • 打赏
  • 举报
 回复
或者是把div改成span
lihan6415151528 2009-04-09
  • 打赏
  • 举报
 回复
float:left
float:right
2个div并列
NULL 博文链接：https://baiiiuuu.iteye.com/blog/1130265
将两个div左右并列显示并实现点击标题切换内容
将两个div左右并列显示并实现点击标题切换内容的效果，接下来为大家详细介绍下js中时如何实现的，感兴趣的朋友不要错过
html+div+css初级入门到制作企业站视频课程
本套html,div&css;课程完全初级, 通过学习DIV+CSS, 了解分清html div css三者关联&作用,通过一个企业站首页排版掌握html,div+css
Dreamweaver中div标签怎么设置左右并排?
Dreamweaver中div标签怎么设置左右并排？Dreamweaver中div标签默认是上下并排的，想要设置成左右并排，该怎么设置呢？下面我们就来看看详细的教程，需要的朋友可以参考下
div的两列居中放置并对每个div设计css样式
一个大的div id=content包含两个左右结构的div，id=side和id= main 并居中放置，下面是具体的示例代码，感兴趣的朋友可以参考下
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章