不占物理空间的div

最新推荐文章于 2022-11-15 19:30:00 发布
最新推荐文章于 2022-11-15 19:30:00 发布
阅读量1.5k 收藏
点赞数
文章标签： div button input border xhtml javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq675200293/article/details/4371756
版权

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

        <head>
         <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
         <title>不占物理空间的div</title>
         <script langauge="javaScript" type="text/javascript">
         function showDiv(i)
         {
             for(j=0;j<=6;j++)
             {
                 document.getElementById('div'+j).style.display='none';
             }
                  document.getElementById('div'+i).style.display='block';
          }
         </script>
        </head>
        <body >
         <form>
             <table width="700" border="1" cellspacing="0" cellpadding="0" >
             <tr>
                 <td colspan="2"> </td>
             </tr>
             <tr>
                 <td width="169" height="283"><table width="100%" border="1" cellspacing="0" cellpadding="0">
             <tr>
                 <td height="30"><div align="center"><input type=button value="showDiv0" οnclick="showDiv(0);">
                 会员管理</div></td>
             </tr>
             <tr>
                 <td height="30"><input type=button value="showDiv1" οnclick="showDiv(1);"></td>
             </tr>
             <tr>
                 <td height="30"><input type=button value="showDiv2" οnclick="showDiv(2);"></td>
             </tr>
             <tr>
                 <td height="30"><input type=button value="showDiv3" οnclick="showDiv(3);"></td>
             </tr>
             <tr>
                 <td height="30"><input type=button value="showDiv4" οnclick="showDiv(4);"></td>
             </tr>
             <tr>
                 <td height="30"><input type=button value="showDiv5" οnclick="showDiv(5);"></td>
             </tr>
             <tr>
                 <td height="30"><input type=button value="showDiv6" οnclick="showDiv(6);"></td>
             </tr>
         </table></td>
             <td width="525">
         <div id=div0 >ggggg</div>
         <div id=div1 >ggggg</div>
         <div id=div2 >bbbbb</div>
         <div id=div3 >ccccc</div>
         <div id=div4 >ddddd</div>
         <div id=div5 >eeeee</div>
       
           <div style="border:1px solid #000;background:#eee">
         <span style="width:200;height:200;visibility:hidden"></span>
             ←SS属性为visibility:hidden的对象
         </div><br>
         <div  id =div6 style="display:none;" background:#666";>xiaobao
  <li><a href="http://www.360.cn/down/soft_down2-3.html">360卫士</a></li>
    <li><a href="http://down.360safe.com/360compkill.zip">木马查杀</a></li>
    <li><a href="http://hao.360.cn/tools.html#a">天气预报</a></li>
    <li><a href="http://www.365rili.com/">万年历</a></li>
    <li><a href="http://www.ip138.com/">IP地址</a></li>
    <li><a href="http://www.fangjia.com/fangjia-gujia/">房价评估</a></li>
    <li><a href="tools.html#c">火车查询</a></li>
    
         </div>

         </td>
         </tr>
             </table>
         </form>
         </body>
     </html>

奔跑的兔子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过float实现两个div不换行
09-25
<div id="row2">第二个div不换行</div> ``` 在这个例子中，有两个`div`元素。`div#row1`设置了`float: left;`，因此它会向左浮动，不会占用右侧的空间，允许`div#row2`紧挨着它。由于`div#row2`没有设置`float`...
CSS技巧DIV为空时占据空间的解决办法
10-30
如果给div元素设置了宽度时，比如width:100%，此时div在IE中（IE6，IE7）将占据物理空间，而在FF中不占据物理空间（正确理解）。为了表述直观，将样式直接写在元素标签内：
浮动布局学习
Antoine__的博客
11-15 621
布局方式：文档流中元素默认的布局方式，margin，浮动，定位，弹性盒子，网格布局·····浮动：设置元素浮动，可以让元素脱离文档流，从而不具有元素在文档流中特点，即块元素不会独占一行，行内元素也可以设置宽高等等设置元素浮动：float可选值：none 默认值left 向左浮动right 向右浮动设置元素浮动后的特点1、元素脱离文档流，元素一旦脱离文档流，就不会占据原来在文档流中的位置，其下面 的元素会立即跑上去。
div靠边隐藏_css如何隐藏div不占位置？
weixin_39617470的博客
02-15 477
display 属性依照词义真正隐藏元素。将 display 属性设为 none 确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。一旦 display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过渡动画是无效的，它的任何不同状...
CSS芝麻
xiaopi3的博客
05-27 494
CSS芝麻设置div相对位置后不让其占用空间 设置div相对位置后不让其占用空间 情景： 当需要某个元素偏离原本位置一定位置时，又不希望其占用原来的位置空间。 分析： 使用绝对定位虽然可以不占空间但是不能相对于原来的位置，它是相对于已定位的父元素。使用相对定位虽然可以相对于原本位置，但是需要占用空间 解决： 经典解决方案：【子绝父相】。将当前需要改变的元素使用一个空div包裹，子元素绝对定位，不占用位置，而父元素为空div所以占用0位置，父元素采用相对定位，能让子元素以其作为锚点进行偏置，即相对于原本位置。
js如何设置在iframe框架中指定div不显示
10-26
3. **动态插入和删除元素**：如果只需要隐藏`div`，但不需要保留其在DOM中的位置，可以使用`document.getElementById("top").remove()`来移除`div`，或者使用`document.createElement('div')`和`parentElement....
html小技巧之td,div标签里内容不换行
10-25
主要介绍了td,div标签里内容不换行的方法,需要的朋友可以参考下
div整体居中其内容不居中的示例代码
09-25
有时我们会有这样的需求就是让div整体居中且内容不居中，下面有个不错的示例，大家可以参考下
隐藏一个div不让他占位置（可用）
LYoungJ的博客
03-29 1万+
div隐藏后不占空间的写法：可以尝试在div中加入style="DISPLAY: none;"这样就不会占空间了。如果写成：style="DISPLAY: none;"visibility属性：确定元素显示还是隐藏；visibility="visible|hidden"，visible 显示，hidden 隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它...
浮动元素不占空间的原因
橘猫吃不胖的博客
10-20 1875
为什么说浮动元素不占空间？ 以两个div为例，正常是俩个div都会显示出来，占据2空间。加入浮动后，div就会叠加显示在一个位置，此时要想让两个div正常显示一般要使用到margin-left浮动div的宽度，或者也是使用浮动。 如果不设置，div叠加在一个位置时，只是位置叠加，但div中的内容不会被覆盖，如果后面的div没有指定宽度则自动横向填充完整，文字过多则会跑到第一个div下面形成文字环绕效果。 如果指定宽度则会去掉被覆盖的宽度显示，其它的文字到浮动div下面显示，即产生文字环绕效果。 ...
如何让div隐藏后不占空间，不乱布局
weixin_34417635的博客
12-29 1301
你可以尝试在div中加入style="DISPLAY: none;" 这样就行了 具体看手册
div 隐藏 显示 占空间 不占空间
weixin_33875564的博客
09-22 1044
引用：http://0755-oopp.blog.163.com/blog/static/2673281201011632617841/ div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白 style="visibility: none;" document.getElementById("typediv1").style.visibility="hidden";...
Html隐藏占空间与隐藏不占空间
热门推荐
刘德利CSDN博客
08-14 3万+
隐藏不占用空间：display:none;以下为示例代码：<span style="display:none;"> 获取中</span>隐藏占用空间： visibility:hidden;以下为示例代码：<span style="visibility:hidden;"> 获取中</span>
DIV 浮动存不占空间
weixin_30642869的博客
05-17 522
DIV 浮动存不占空间比如<div style="width:80px; border:1px solid #333"><div style="float:left; height:50px; width:20px; background:#CCC"></div><div style="float:left; height:70px; width:50px...
关于用JS隐藏div占用和不占用页面位置的小记录
我是孤单的飞鸟
10-21 6787
/document.getElementById("qijiandian").style.display = "block";
转---30 分钟学会 Flex 布局
weixin_34345560的博客
03-04 92
正文从这开始～ Flex 基本概念： 在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，这个我们后面再说。 在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cro...
Div浮层不占据下面的空间
weixin_30918415的博客
07-13 507
在Div的样式中加上position:absolute; 转载于:https://www.cnblogs.com/pfs1314/archive/2010/03/09/1681494.html
让div居中并且不占位置
最新发布
03-26
div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 这样设置后，DIV会以其父元素作为基准居中，并且不会占据任何位置，也不会撑开父元素的大小。如果需要为父元素设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值