问答首页 → Web前端技术
0 0

DIV的样式CSS5

<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真的不熟悉。还没弄好。不行呀？谢谢大家
CSS 
2009年3月24日 13:26

11个答案 按时间排序 按投票排序

0 0

采纳的答案

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
.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;
}
</style>
<script type="text/javascript">
function clickdiv(obj){
	obj.className+=' bg';
}

</script>
</head>
<body>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div style="clear:both;"></div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
</body>

2009年3月24日 14:28
0 0 

 
<body>  
	
   <div style="float: left;" id="outerBox" onclick="clickdiv();">a</div>  
   
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">右拇</div>  
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">右食</div>
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">右中</div> 
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">右环</div>
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">右小</div>
  
     <div style="float: left;" id="outerBox" onclick="clickdiv();">
   <div style="float: left;" id="outerBox" onclick="clickdiv();">左拇</div>
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">左食</div> 
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">左中</div>
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">左环</div> 
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">左小</div> 
   </div>  
 </body>

2009年3月24日 14:15
0 0 

 
<body>  
	
   <div style="float: left;" id="outerBox" onclick="clickdiv();">a</div>  
   
   <span id="outerBox" onclick="clickdiv();">右拇</span>  
   <span id="outerBox" onclick="clickdiv();">右食</span>
   <span id="outerBox" onclick="clickdiv();">右中</span> 
   <span id="outerBox" onclick="clickdiv();">右环</span>
   <span id="outerBox" onclick="clickdiv();">右小</span>
  
     <div style="float: left;" id="outerBox" onclick="clickdiv();">
   <span id="outerBox" onclick="clickdiv();">左拇</span>
   <span id="outerBox" onclick="clickdiv();">左食</span> 
   <span id="outerBox" onclick="clickdiv();">左中</span>
   <span id="outerBox" onclick="clickdiv();">左环</span> 
   <span id="outerBox" onclick="clickdiv();">左小</span> 
   </div>  
 </body>

2009年3月24日 14:12
0 0


2排之间 加一个空的 <div></div>也可以

2009年3月24日 14:10
0 0


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
.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;
}
</style>
<script type="text/javascript">
function clickdiv(obj){
	obj.className+=' bg';
}

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

2009年3月24日 13:52
0 0 


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

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

2009年3月24日 13:42
0 0 

<div>a</div>&nbsp;&nbsp;&nbsp;&nbsp;<div>b</div>

2009年3月24日 13:42
0 0


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

1. 给html加上dtd标志,就是document type

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

3.

<div id="outerBox" onclick="clickdiv();">

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

# var myImg = document.getElementById("outerBox"); 
#     myImg.style.cssText="background:url('1.jpg') no-repeat 2 2" 

直接使用 

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



2009年3月24日 13:40
0 0 

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

2009年3月24日 13:32
0 0


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

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

1:浮动

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

2.不用div,改成span

3......

2009年3月24日 13:32
0 0

float: left;

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

2009年3月24日 13:31

相关推荐

Magicbox
Ask-but
我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

Global site tag (gtag.js) - Google Analytics