让DIV不换行及多div重叠

最新推荐文章于 2021-06-05 03:29:31 发布
转载 最新推荐文章于 2021-06-05 03:29:31 发布 · 1.4w 阅读 · 2
文章标签：

#div #list #javascript #function #xhtml #float

本文介绍了使用CSS进行网页布局的多种方法，包括如何使元素不换行显示以及如何通过float和display属性来并排显示多个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';

}



}

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

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

CSS实现div元素的不换行显示
Byte_O_O的博客
09-26 1027
要实现div元素的不换行显示，你可以使用CSS的样式属性来控制元素的布局和显示方式。通过将上述代码保存为HTML文件并在浏览器中打开，你将看到div元素中的内容在一行中显示，而不会换行。在上面的代码中，我们为div元素添加了一个类名为"no-wrap"，这将用于在CSS样式中进行选择。首先，你需要在HTML文件中创建一个div元素。你可以将上述CSS代码添加到你的CSS文件中，或者直接将其包含在HTML文件中的。这会使div元素中的文本内容在一行中显示，而不会自动换行。在上面的代码中，我们使用了。
多个div能不换行吗？
12-20
多个div能不换行吗？能否自动把父容器撑开？请下载直接运行即可。可直接与我联系，我一直在csdn。
两个div在同一行且不换行的两种方法
09-25
主要介绍了两个div在同一行，两个div不换行的两种实现方法，有不知道的朋友可以参考下
设置div不换行
热门推荐
Schaffer的博客
04-07 2万+
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 879
      今天，在用不同的浏览器测试自己做的一个平台时，发现了一个比较诡异的问题。在IE下显示正常的两个DIV，在Chrome下竟然发生了错位。 在IE下显示正常     Chrome下，错位了...     让我们仔细看一下不和谐的现象       解决的思路： 1、百度一下（为什么不同的DIV会重叠） 2、用Chrome下的调试工具，发现问题   那...
两个div如何并排一行具体该怎么实现
12-13
在这个问题中，通过设置CSS样式，我们可以让两个`div`元素在同一行内排列。以下将详细解释实现这个效果的关键步骤和涉及的CSS属性。 首先，我们有两个主要的CSS属性用于此目的：`float`和`display`。 1. `float`...
css文字和div在同一行，文字换行后和div对齐
08-09
实际上，我们不需要环绕，而是希望文字从div右侧开始，换行后也在div右侧下方，不与div重叠。 */ /* 使用overflow: hidden; 或者 display: inline-block; 来触发BFC，避免环绕 */ display: block; overflow: ...
vue页面中上面div里面字太多了换行，但是挡住了下面的div里面的文字，应该怎样修改样式
最新发布
12-24
我们正在解决一个Vue页面中的样式问题：上面div中的文字在换行时可能会挡住下面div的文字。根据引用[1]的内容，我们可以知道这个问题通常与定位（position）和层叠上下文（z-index）有关，同时还可能涉及margin、...
<style> .container { display: flex; flex-wrap: wrap; /* 允许换行 */ } .box { flex: 0 0 33.33%; /* 不伸缩，基础宽度33.33% */ box-sizing: border-box; } </style> <div class="container"> <div class="box">内容1</div> <div class="box">内容2</div> <div class="box">内容3</div> <div class="box">内容4</div> <!-- 更多box... --> </div>给每一个子元素设置边框设置边框时 边框不重叠
11-13
另外，如果希望边框在视觉上不重叠（即相邻边框合并为一条），可以使用负外边距（margin）来重叠边框，或者使用outline（但outline不占空间，不会影响布局，所以相邻边框会重叠显示为两条线）。如果希望边框合并，...
IE7兼容模式可以解决IE8 FF浏览器下出现文字重叠问题
09-25
这是一种让IE8模拟IE7浏览器的行为，采用IE7的渲染引擎来呈现网页。这可以通过在`<head>`部分添加以下代码实现： ```html ``` 这条元标签告诉浏览器使用IE7的渲染引擎来处理页面，从而可能解决因不同浏览器间渲染...
如何讓浮動的DIV不換行
xiaopeng__的专栏
12-06 4424
如何讓DIV不換行 單個DIV： 1.用nobr元素 Code:  不換行不換行 2.用nowrap元素 Code:  div不換行div不換行div不換行   二，兩個DIV 1.用CSS裏的float屬性 Code:  div#row1 { float: left; color: blue; } di
怎么可以让div不换行
it_java_com的博客
08-12 498
div默认属性display: block；//将元素显示为块元素； 你要把他的属性改为inline //将元素显示为内联元素（又称为行内元素）
控制两个div不换行
zhw_2009的专栏
08-20 480
#row1 { float: left; width:90px; } #row2 { color: red } 第一个div 第二个div不换行
两个div在同一行，两个div不换行
weixin_34128839的博客
12-20 303
方法一： &lt;div style="display:inline"&gt;     &lt;div id="div1" style="float:left"&gt;div1   content&lt;/div&gt;     &lt;div id="div2" style="float:left"&gt;div2   conte
div 不换行
回家换拖鞋的专栏
09-28 3034
1、div里面的多个子div不换行： .p{ display:inline-block; } .p div{ float:left; display:block; } 2、单个div里面的内容不换行：  ① 用nobr标签 不换行不换行  ② 用nowrap属性 div不换行div不换行div不换行 3、并列的div不换行  ① 用float属性    
html 内容不换行,css如何设置div内容不换行？
weixin_34959044的博客
06-05 1604
通过css可以使对应div标签内的文字换行或不换行设置操作，下面我们来看一下使用css设置div标签内的文字不换行的方法。默认情况下，如果 div 内的文字如果一行显示不下的话，它会自动折行显示。HTML中文网.content {width: 150px;height: 60px;background-color: lightcyan;}HTML中文网 欢迎您 欢迎您 欢迎您效果图：如果想让文字在...
让上下两个＜div＞不要重叠 下面＜div＞加上style=“clear:both；“清除浮动
自述天地
09-24 1384
<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 :...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值