让DIV不换行及多div重叠

最新推荐文章于 2022-02-17 08:49:00 发布
最新推荐文章于 2022-02-17 08:49:00 发布
阅读量654 收藏
点赞数
文章标签： div list javascript function xhtml float

一，单个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">
 

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

su317
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html中，让多个div横向排列且不换行（左右滑动）
weixin_48596030的博客
06-11 3197
html中，让多个div横向排列且不换行（左右滑动）
两个div如何并排一行具体该怎么实现
12-13
在这个问题中，通过设置CSS样式，我们可以让两个`div`元素在同一行内排列。以下将详细解释实现这个效果的关键步骤和涉及的CSS属性。 首先，我们有两个主要的CSS属性用于此目的：`float`和`display`。 1. `float`...
DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加
php菜鸟技术天地
06-12 1万+
让DIV重叠并按想要顺序重叠需要CSS来实现，即CSS绝对定位进行实现。  重叠样式需要主要CSS样式解释  1、z-index 重叠顺序属性  2、position:relative和position:absolute设置对象属性为可定位（可重叠）  3、left right top bottom绝对定位具体位置设置  配合的样式  1、css width  2、c
如何让多个div不换行
lchSAIL的博客
10-26 2万+
前几天做项目遇到一个小问题，如何让多个div不换行。现在把解决的办法记录下来（通过white-space解决的）请看下面这段代码<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div会换行</title> <style> .container{
随手记的div+css的小抄代码
11-04
- ` `: 行内换行，用于强制换行而不形成新的段落。 - `<span>`: 行内容器，常用于应用样式或脚本操作。 3. **列表标签：** - `<ul>` 和 `<li>`: 无序列表及其列表项。 - `<ol>` 和 `<li>`: 有序列表及其...
IE7兼容模式可以解决IE8 FF浏览器下出现文字重叠问题
09-25
这是一种让IE8模拟IE7浏览器的行为，采用IE7的渲染引擎来呈现网页。这可以通过在`<head>`部分添加以下代码实现： ```html ``` 这条元标签告诉浏览器使用IE7的渲染引擎来处理页面，从而可能解决因不同浏览器间渲染...
div+css布局中常用方法汇总.docx
最新发布
11-26
12. **高度不适应问题**：解决高度不适应通常需要通过增加`padding`或`border`，或者通过设置`overflow:hidden`来触发浏览器重新计算高度。 13. **浏览器兼容性测试**：在制作网页时，必须考虑宽屏浏览器下的表现，...
div+css三栏布局演示
11-27
### Div+CSS三栏布局详解 #### 一、布局概述 本文档主要介绍了一种经典的网页布局技术——三栏布局的实现方式，采用Div+CSS技术。三栏布局是网页设计中常见的一种布局形式，其特点是在网页中分为三个部分：左侧栏...
多个div能不换行吗？
12-20
多个div能不换行吗？能否自动把父容器撑开？请下载直接运行即可。可直接与我联系，我一直在csdn。
设置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不换行的三种方法
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排列在同一行而不换行
Kiloveyousmile的博客
05-09 3万+
有时候，我们可能会产生多个div标签横向排列而不换行的需求，具体有以下几种实现方法：1. 同级div设置display:inline-block，父级div强制不换行例如：<html> <head></head> <body> <div id="container"> <div class="lable">测试测试</div> <div class="lable">测试测试</d
如何让多个div横向排列而不换行
热门推荐
vcxiaohan的博客
12-15 6万+
现象 多个div排列在一行，包裹的框宽度不足时，那么会换行显示 如图 解决 关键点在于white-space: nowrap;的使用 效果 代码<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
让div中的内容不换行
w36680130的博客
01-07 1826
本文转载自：https://www.cnblogs.com/nier/archive/2012/07/20/2601630.html 作者：nier 转载请注明该声明。通常我们的需求就是让div中的元素不换行 举个例子 <ul> 　　<li><img src="img.gif" /></li> 　　<li><img src...
div 不换行
个人主页
08-22 1660
div默认就是会换行的，但是如果你对他设置了宽度，同时你第一个元素也设置了宽度和向左浮动的样式的话，那就可以了 &lt;div id="div1" style="width:100px;height:100px;float:left;"&gt;div1&lt;/div&gt; &lt;div id="div2" style="width:100px;height:100px;float:left;.
使div内的元素不换行
记录学习编程的日常
02-17 1929
给div设置css样式white-space: nowrap;即可。
多个div不换行
欧阳小白的成长博客
04-21 1805
                        &lt;div class="v_content"&gt;     &lt;ul type="none"&gt; &lt;li&gt;&lt;img src="../img/tupian.jpg" alt="泉新一"/&gt;&lt;h3&gt;《寄生兽》&lt;/h3&amp
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值