让DIV不换行及多div重叠

最新推荐文章于 2023-11-09 13:24:20 发布
最新推荐文章于 2023-11-09 13:24:20 发布
阅读量1.4w 收藏 2
点赞数
分类专栏： DHTML Javascript CSS 文章标签： div list javascript function xhtml float
一，单个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';

}



}

</script>
注意:此写法有一个问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

若页面头部有以上这句话则无法实现滚动条的功能,不知道为什么.

cui55
关注
专栏目录
flex布局实现叠在另一个div之上_flex布局
weixin_42515295的博客
12-30 1685
在学习flex布局之前，我们是如何让如下四个盒子排在一列呢？我们也许会用浮动、定位等等。当我们使用的时候我们会觉得很麻烦，需要调间距、量距离等。然而学习了felx布局，我们可以轻松的解决这些问题。1.什么是flex布局？2009年，W3C 提出了一种新的方案——Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Fl...
html div浮动效果,【html】【6】div浮动float
weixin_36323601的博客
06-03 2432
我想 当看完上面的必看链接，拥有一定的基础后也得7天左右，记住 一定要看完，知道它都有什么，没学会不要紧，哪怕只是有个简单的概念也行，随着后续的使用慢慢深入学习，现在开始div布局。必看参考：http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.htmlhttp://paranimage.com/css-float-attribute/ht...
两个div如何并排一行具体该怎么实现
12-13
复制代码代码如下: <style> .box1 {width:70%; float:left; display:inline;} .box2 {width:30%; float:left; display:inline;} </style> <div class=”container”> <div class=”box1″>121212</div> <div class=”box2″>455656</div> </div>
设置div不换行
Schaffer的博客
04-07 1万+
div本身为块级元素，且会换行。 span是行内元素，不会换行。 下面介绍三种方式： 1、浮动 为你的每个DIV设置左浮动即可 <div style="float:left"></div> 2、设置为行标签 <div style="display:inline"></div> 3、设置为行标签，但是具备块标签的属性 <div style="display:inline-block"></div> 扩展： div内的文本不换行： 添
不让Div相互重叠的解决办法
weixin_33722405的博客
06-02 821
      今天，在用不同的浏览器测试自己做的一个平台时，发现了一个比较诡异的问题。在IE下显示正常的两个DIV，在Chrome下竟然发生了错位。 在IE下显示正常     Chrome下，错位了...     让我们仔细看一下不和谐的现象       解决的思路： 1、百度一下（为什么不同的DIV会重叠） 2、用Chrome下的调试工具，发现问题   那...
怎么可以让div不换行
it_java_com的博客
08-12 424
div默认属性display: block；//将元素显示为块元素； 你要把他的属性改为inline //将元素显示为内联元素（又称为行内元素）
IE7兼容模式可以解决IE8 FF浏览器下出现文字重叠问题
09-25
这是一种让IE8模拟IE7浏览器的行为，采用IE7的渲染引擎来呈现网页。这可以通过在`<head>`部分添加以下代码实现： ```html ``` 这条元标签告诉浏览器使用IE7的渲染引擎来处理页面，从而可能解决因不同浏览器间渲染...
html怎么使div和上面距离为0,img div 间距设为0，图片和DIV间距的调整
weixin_34522296的博客
06-29 1209
一、如何定义高度很小的容器？在IE6下没法定义小高度的容器，是由于有一个默认的行高。列举2种解决方案：overflow:hidden | line-height:0二、图片下方出现几像素的空白间隙？这个也有多种解决方案，如将img定义为display:block,或定义父容器为font-size:0，我的更推荐使用vertical-align的方式，它的值能够是text-top | text-bo...
html 内容不换行,css如何设置div内容不换行？
weixin_34959044的博客
06-05 1464
通过css可以使对应div标签内的文字换行或不换行设置操作，下面我们来看一下使用css设置div标签内的文字不换行的方法。默认情况下，如果 div 内的文字如果一行显示不下的话，它会自动折行显示。HTML中文网.content {width: 150px;height: 60px;background-color: lightcyan;}HTML中文网 欢迎您 欢迎您 欢迎您效果图：如果想让文字在...
让上下两个＜div＞不要重叠 下面＜div＞加上style=“clear:both；“清除浮动
自述天地
09-24 1240
<template> <el-row class="tac" style="height: 100%"> <ts-header :headerTitle="headerTitle" :preUrl="preUrl"> </ts-header> <el-col :span="1" style="height:1px"> <ts-portal-menu :...
html中如何div转换下一行,css如何让两个div不换行显示？
weixin_42360972的博客
05-31 2741
css如何让两个div不换行显示？让两个div并列显示？下面本篇文章就来给大家介绍一下使用CSS让两个div并列在一行显示的方法，希望对大家有所帮助。在HTML中，div是块状元素，div盒子本身默认样式属性是独占一行，而解决div独占一行方法通常有两种，一种为设置浮动，另外一种为其设置display样式，将其转换为行内元素或行内块状元素。方法1：使用css float并排显示我们对div设置一个...
html怎么让两个div重叠,css怎么让几个div不重叠
weixin_42162978的博客
05-30 4795
css div不堆叠层叠重复遮挡缘由与筹划门径之css怎样让几个div不堆叠,div不堆叠，div与div之间不遮挡题目原由，打点方法规划思路图文教程篇。CSS5通过三种办法设计怎么让div不遮挡不重叠。一、同级DIV有的是用float有的不有应用构成DIV重叠赤色DIV与灰色后盾DIV重叠体现咱们看看代码重叠DIV.left{width:200px; float:left; color:#F00...
div内容超出不换行
最新发布
qq_44792224的博客
11-09 1627
div内容超出不换行。
html5元素重叠,css怎么让几个div不重叠
weixin_39568133的博客
05-30 2799
css div不堆叠层叠反复遮挡缘故原由与解决办法之css怎样让几个div不堆叠,div不堆叠，div与div之间不遮挡标题问题启事，打点方式设计思绪图文教程篇。CSS5经过三种方式希图怎样让div不遮挡不堆叠。一、同级DIV有的是用float有的不有运用形成DIV堆叠红色DIV与灰色布景DIV重叠展现我们看看代码堆叠DIV.left{width:200px; float:left; color:...
html设置盒子重叠,css怎么让几个div不重叠 不层叠重复不遮挡
weixin_31591833的博客
06-02 1万+
css div不重叠层叠重复遮挡原因与解决方法之css怎么让几个div不重叠,div不重叠，div与div之间不遮挡问题原因，解决方法解决思路图文教程篇。CSS5通过三种方法解决怎么让div不遮挡不重叠。一、同级DIV有的是用float有的没有使用造成DIV重叠红色DIV与灰色背景DIV重叠显示我们看看代码重叠DIV.left{width:200px; float:left; color:#F00...
div不换行的三种方法
热门推荐
hellojoy的博客
04-10 2万+
https://www.cnblogs.com/robinunix/p/11346126.html style="display: inline-block" float 1 2 3 4 5 6 7 8 9 10 <divclass="div1">123</div>...
控制两个div不换行
thinktotings的专栏
03-16 330
控制两个div不换行 &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; #row1 { float: left; width:90px; } #row2 { color: red } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="row1&qu
CSS高级教程：div与span、盒子模型与元素定位解析
与div不同，span不会自动换行。在CSS排版中，div常用于创建块级元素，而span则用于处理行内元素。 接下来，我们讨论盒子模型，这是理解CSS布局的基础。每个CSS元素都可以看作是一个盒子，由四个部分组成：内容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值