注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

一车,一房,一个温暖家

10万左右的车,80平方的房子,这是我奋斗的暖暖的家

 
 
 

日志

 
 

引用 让DIV不换行及多div重叠   

2015-06-21 05:35:26|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自Yesterday morning《让DIV不换行及多div重叠》

一,单个DIV:

1.用nobr元素

<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属性

<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属性

<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';

}

}

</script>

注意:此写法有一个问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

若页面头部有以上这句话则无法实现滚动条的功能

  评论这张
 
阅读(10)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018