DIV的样式CSS

<html>
<head>
<style type="text/css">
#outerBox{
    width:100px;
    height:100px;
    border:1px black solid;
    text-align:center;  
}
</style>
<script type="text/javascript">
function clickdiv(){
    var myImg = document.getElementById("outerBox");
    myImg.style.cssText="background:url('1.jpg') no-repeat 2 2"
}

</script>
</head>
<body>
    <div id="outerBox" onclick="clickdiv();">jjbjbj</div>
    <div id="outerBox" onclick="clickdiv();">jjbjbj</div>
</body>

如何让2个DIV不换行呀？

问题补充：
可以并排了。float: left;但是挨在一起了。怎么让它有点间距呀
问题补充：
   <div id="outerBox" onclick="clickdiv();">右拇</div>
   <div id="outerBox" onclick="clickdiv();">右食</div>
   <div id="outerBox" onclick="clickdiv();">右中</div>
   <div id="outerBox" onclick="clickdiv();">右环</div>
   <div id="outerBox" onclick="clickdiv();">右小</div>

   <div id="outerBox" onclick="clickdiv();">左拇</div>
   <div id="outerBox" onclick="clickdiv();">左食</div>
   <div id="outerBox" onclick="clickdiv();">左中</div>
   <div id="outerBox" onclick="clickdiv();">左环</div>
   <div id="outerBox" onclick="clickdiv();">左小</div>
不好意思。我没一下说整。要是2排呢？
问题补充：
我对DIV和CSS真的不熟悉。还没弄好。不行呀？谢谢大家

[code="html"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">

.outerBox{ width:100px; height:100px; border:1px black solid; text-align:center; float:left; margin-right:20px; /* 右间距 */ margin-bottom:20px; /* 下间距 */ } .bg{ background:url('test.gif') no-repeat 2px 2px; } function clickdiv(obj){ obj.className+=' bg'; }

jjbjbj

[/code]

float: left;

http://zhidao.baidu.com/question/69685042.html

...这么简单的问题..刚入门是吗...

div肯定换行,不换行的方法很多 .

1:浮动

#outerBox的css里面再加一个float:left

2.不用div,改成span

3......

[code="html"]

jjbjbj

[/code]

看来是初学div+css的,几个基本的问题需要知道的...

给html加上dtd标志,就是document type
页面上的id不要重复用,你这里2个都用id,outerBox这是很不规范的,因为id的含义表示它是唯一的,如果id不唯一,在js里面调用就会出问题.你的js使用了getElementById,它只会返回一个元素,你很快就会发现,为什么一个点击了有效果,另一个点击却没效果?

这里已经有了句柄,你在js

var myImg = document.getElementById("outerBox");

myImg.style.cssText="background:url('1.jpg') no-repeat 2 2"

直接使用
[code="java"] function clickdiv(){

this.style.cssText="background:url('1.jpg') no-repeat 2 2"

} [/code]

[code="html"]

[/code]

[code="html"]

.outerBox{ width:100px; height:100px; border:1px black solid; text-align:center; float:left; margin-right:20px; /* 右间距 */ } function clickdiv(){ this.style.cssText="background:url('1.jpg') no-repeat 2 2" }

jjbjbj

[/code]

不好意思,上面的代码有点问题,给你一个完整的比较标准的代码.

[code="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">

.outerBox{ width:100px; height:100px; border:1px black solid; text-align:center; float:left; margin-right:20px; /* 右间距 */ } .bg{ background:url('test.gif') no-repeat 2px 2px; } function clickdiv(obj){ obj.className+=' bg'; }

jjbjbj

[/code]

2排之间加一个空的

也可以

[code="html"]

右拇

右食
右中
右环
右小

 <div style="float: left;" id="outerBox" onclick="clickdiv();">

左拇
左食
左中
左环
左小

[/code]

[code="html"]

右拇

右食

右中

右环

右小

 <div style="float: left;" id="outerBox" onclick="clickdiv();">

左拇

左食

左中

左环

左小

[/code]