1. 程式人生 > >讓DIV不換行及多div重疊

讓DIV不換行及多div重疊

一,單個DIV:
1.用nobr元素
Code:
<html>
<head>
</head>
<body>
<div><nobr>不換行不換行<nobr></div>
</body>
</html>

2.用nowrap元素
Code:
<html>
<head>
</head>
<body>
<div nowrap>div不換行div不換行div不換行</div>
</body>
</html>

二,兩個DIV
1. 用CSS裡的float屬性
Code:
<html>
<head>
<style type="text/css">
div#row1 { float: left; color: blue; }
div#row2 { color: red }
</style>
</head>
<body>
<div id="row1">第一個div</div>
<div id="row2">第二個div不換行</div>
</body>
</html>

2. 用CSS裡的diplay屬性
Code:
<html>
<head>
<title>CSS中的不換行</title>
<style type="text/css">
div#row1 { color: blue;display: inline }
div#row2 { color: red;display: inline }
</style>
</head>
<body>
<div id="row1">第一個div</div>
<div id="row2">第二個div不要換行</div>
</body>
</html>

多DIV重疊

1.
<div id="left_bot_list1" style="height:448px;width:228px;overflow:auto">    
      </div>
   <div id="left_bot_list2" style="VISIBILITY:hidden;POSITION: relative;Top:expression(0-document.getElementById('left_bot_list1').offsetHeight);">
  
   </div>  
   <div id="left_bot_list3" style="VISIBILITY:hidden;POSITION: relative;Top:expression(0-document.getElementById('left_bot_list1').offsetHeight-document.getElementById('left_bot_list2').offsetHeight);">
   
   </div>

<script type="text/javascript" language="Javascript">
function changeDivleft_bot(num){
if(num == 1){  

   left_bot_list1.style.visibility = "visible";
   left_bot_list2.style.visibility = "hidden";
   left_bot_list3.style.visibility = "hidden";
}
if(num == 2){  
  
   left_bot_list1.style.visibility = "hidden";
   left_bot_list2.style.visibility = "visible";
   left_bot_list3.style.visibility = "hidden";
  
}
if(num == 3){
   left_bot_list1.style.visibility = "hidden";
   left_bot_list2.style.visibility = "hidden";
   left_bot_list3.style.visibility = "visible";

}



}

//alert(tree.loaded);
</script>

2.

<div id="left_bot_list1" style="display:inline;height:448px;width:222px;overflow:auto">    
      </div>
   <div id="left_bot_list2" style="display:none;height:448px;width:222px;overflow:auto">
   
   </div>  
   <div id="left_bot_list3" style="display:none;height:448px;width:222px;overflow:auto" >
     
   </div>

<script type="text/javascript" language="Javascript">
function changeDivleft_bot(num){
if(num == 1){  
  
   left_bot_list1.style.display = 'inline';
   left_bot_list2.style.display = 'none';
   left_bot_list3.style.display = 'none';
}
if(num == 2){  
  
   left_bot_list1.style.display = 'none';
   left_bot_list2.style.display = 'inline';
   left_bot_list3.style.display = 'none';
  
}
if(num == 3){
   left_bot_list1.style.display = 'none';
   left_bot_list2.style.display = 'none';
   left_bot_list3.style.display = 'inline';

}



}

若頁面頭部有以上這句話則無法實現滾動條的功能,不知道為什麼.