当前位置：首页 → 问答吧 → 让DIV不换行及多div重叠

让DIV不换行及多div重叠

时间：2009-12-10

来源：互联网

一，单个DIV：
1.用nobr元素
Co de:
<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';

}

}
</script>
注意:此写法有一个问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
若页面头部有以上这句话则无法实现滚动条的功能,不知道为什么.

作者: zhoulian 发布时间: 2009-12-10

让DIV不换行及多div重叠

热门阅读

热门下载