控制div中的内容 最好的办法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了控制div中的内容 最好的办法相关的知识,希望对你有一定的参考价值。

比如我要写我程序的版本 我每页都要修改岂不是很麻烦
有简单的方法控制里面的文字吗 最好的办法是什么?
求解

<div class="version">Version update 12345</div>

1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行

2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如: <#div id=”imfloat”> 相应的css为 #IamFloat

3.浮动ie产生的双倍距离 #box 这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;

4 IE与宽度和高度的问题 IE 不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。 比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样: #boxhtml>body #box

5.页面的最小宽度 min -width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类, 然后CSS这样设计: #container 第一个min-width是正常的;但第2行的width使用了javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

6.DIV浮动IE文本产生3象素的bug 左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距. #box #left #right *html #left <div id="box"> <div id="left"></div> <div id="right"></div> </div>

7.IE捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。 解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

8.float的div闭合;清除浮动;自适应高度;

① 例如:<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移,而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;) 这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。并且将clear这种样式定义为为如下即可: .clear

②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应,要在wrapper里面加上overflow:hidden; 当包含float的 box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。 例如某一个wrapper如下定义: .colwrapper

③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如: <div id=”page”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> 比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决 <div id=”page”> <div id=”bg” style=”float:left;width:100%”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> </div> 再嵌入一个float left而宽度是100%的DIV解决之

④万能float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽. /* Clear Fix */ .clearfix:after .clearfix /* Hide from IE Mac */ .clearfix /* End hide from IE Mac */ /* end of clearfix */ 或者这样设置:.hackbox

11.高度不适应 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。 例: #box #box p <div id="box"> <p>p对象中的内容</p> </div> 解决方法:在P对象上下各加2个空的div对象CSS代码:.1或者为DIV加上 border属性。

12 .IE6下为什么图片下有空隙产生解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.

13.如何对齐文本与文本输入框 加上 vertical-align:middle; <style type="text/css"> <!-- input --> </style>

14.web标准中定义id与class有什么区别吗 一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他. 二.属性的优先级问题 ID 的优先级要高于class,看上面的例子三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

15. LI中内容超过长度后以省略号显示的方法 此方法适用与IE与OP浏览器 <style type="text/css"> <!-- li --> </style>

16.为什么web标准中IE无法设置滚动条颜色了 解决办法是将body换成html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- html --> </style>

17.为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

18.怎么样才能让层显示在FLASH之上呢 解决的办法是给FLASH设置透明 <param name="wmode" value="transparent" />

19.怎样使一个层垂直居中于浏览器中这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二 <style type="text/css"> <!-- div --> </style>
table与div这个句不是很清楚了,应为一般用了table就不用div了,用了div就不用table了
另外,站长团上有产品团购,便宜有保证
参考技术A 你把version样式拿到外部CSS文件中,然后每个页面调用同个CSS文件,这种修改一个CSS文件就可以更改所有引用了它的全局样式。
在页面head中加入
<link rel="stylesheet" href="xxx.css" type="text/css" />
其中xxx.css里包含version样式即可
参考技术B .version{} 控制他的样式啊。本回答被提问者采纳 参考技术C 单独写在一个页面,然后用include,要不就放在js里面,去调用。 参考技术D 可以调用的他的样式啊

如何用js控制frame的隐藏或显示的解决办法

工具:首先引入JS库

<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>

页面中的部分代码:

<button id="onshow">显示/隐藏</botton>
<iframe id="myIframe"></iframe>

隐藏iframe的方法有2种可以参考:

方法1:

//获得需要隐藏的iframe元素对象。
var iframe = document.getElementById('myIframe') ;
//设置属性为隐藏。
iframe.style = "display:none";

方法2:

//给按钮绑定点击事件
$(function()
    $('#onshow').click(function()
        $('#iframe-box').toggle();//控制是否显示
    )
)

参考技术A

在HTML中元素的隐藏和显示是靠CSS的display属性,当display=none时,元素隐藏

可以通过jquery的toggle方法控制display

先在页面放一个按钮和iframe 

<button id="onshow">显示/隐藏</botton>
<iframe id="iframe-box"></iframe>

引入jQuery库文件

<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>

给onshow添加单击事件

<script>
$(function()
$('#onshow').click(function()
$('#iframe-box').toggle();//控制是否显示
)
)
</script>

参考技术B var fr = document.querySelector("frame")[i]; 获得元素对象。
fr.style = "display:none"; 设置属性为隐藏。
参考技术C 这个为什么非得用JS那么麻烦HTML都可以实现的效果。。。系统资料iframe中的name=manFrame就可以了当然JS也可以实现的只是绕了一个太大的弯

以上是关于控制div中的内容 最好的办法的主要内容,如果未能解决你的问题,请参考以下文章

sqlserver 两个表差异合并 除了insert.. select.. 外还有啥最好的办法吗?

有没有办法在 div 中自动换行长单词?

最初将内容 div 设置为零

小说中的弹幕怎么实现的,是JavaScript和css3? 最好有源码发我看看。

display属性 鼠标悬停时显示隐藏内容,

怎么让Table不被里面的内容撑大,最好有详细的代码,急!!!