热门搜索 :
宠物领养
您的当前位置:首页正文

一个DIV如何定位才能完美兼容。_html/css_WEB-ITnose

2023-11-27 来源:微宠网

就是固定在某个地方,IE7/IE8/FF这些能不错位。。

回复讨论(解决方案)

style="position:fixed;top:0,right:0"

思路问题 兼容性不等于一模一样 没人会同时开着 ie6 ie7 ie8 firefox chrome ...看你的页面 所谓的兼容就是 效果在当前浏览器下最佳(达不到可以降级) 视觉在当前的浏览器下自然 功能在所有浏览器下统一致

多测试~~~~~~~~~~~~~

每个浏览器都要测试滴!

老虎传送门

先设置上层DIV相位定位不设置left属性,然后在想定位的DIV加上绝对定位,弄上准确的left,top是不是就基本没事了?我测试了IE和FF都基本没问题,不知道这方法算不算完美

老虎传送门 是觉得这个传送门不错

小编还为您整理了以下内容,可能对您也有帮助:

css div 固定一个div 使这个div不随着网页的滚而滚动 就是把这个div固定在一个位置任何时候都在一个位置

1、需要使用固定定位才能做到这样的效果。具体方法是首先打开html编辑器,首先设置一个容器div,然后设置一个用来演示效果的div,分别设置class属性名为container和fixed:

2、在style标签中设置样式,设置container的position属性为相对定位,并且给它一个很高的高度,然后给fixed设置高度和宽度,以及颜色等属性,这里的重点是设置position属性为fixed,以及设置top和left属性控制div的位置,设置完成后保存文件:

3、打开浏览器,可以看到div并且可以观察到进度条是最上面的:

4、接着将进度条拉倒最下面,可以发现div还是在原来的位置保持不变。以上就是用fixed属性设置div固定位置的方法:

在做div+css过程中应该怎样解决浏览器的兼容问题呢?

一,由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。

CSS Hack的原理是什么

由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",当不能识别下划线"_",而firefox两个都不能认识。等等

书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。

如何写CSS Hack

比如要分辨IE6和firefox两种浏览器,可以这样写:

<style>

div{

background:green; /* for firefox */

*background:red; /* for IE6 */

}

</style>

我在IE6中看到是红色的,在firefox中看到是绿色的。

解释一下:

上面的css在firefox中,它是认识不了后面的那个带星号的东东是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。

在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。

CSS hack:区分IE6,IE7,firefox

区别不同浏览器,CSS hack写法:

区别IE6与FF:

background:orange;*background:blue;

区别IE6与IE7:

background:green !important;background:blue;

区别IE7与FF:

background:orange; *background:green;

区别FF,IE7,IE6:

background:orange;*background:green;_background:blue;

background:orange;*background:green !important;*background:blue;

注:IE都能识别*;标准浏览器(如FF)不能识别*;

IE6能识别*,但不能识别 !important,

IE7能识别*,也能识别!important;

FF不能识别*,但能识别!important;

IE6 IE7 FF

* √ √ ×

!important × √ √

浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6

以: " #demo {width:100px;} "为例;

#demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/

* html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */

*+html #demo {width:130px;} /*会被IE7执行*/

---------------

所以最后,#demo的宽度在三个浏览器的解释为:

FIREFOX:100px;

ie6:120px;

ie7:130px;、

二,对于ul form等在浏览器中是有默认属性的。IE中默认的是margin,但是FIREFOX中默认的是padding。所以在进行定义的时候,为了防止页面结构在不同浏览器中有变化,对ul form等进行设置时应该有如下设置ul,form{ margin:0;padding:0;}

三,IE条件注释功能

1,如果想让html页面中的某一块只在ie中显示可以

<!--[ifIE]>只有IE能显示此块<![endif]-->

那么里边的内容只有在IE浏览器中才能被显示,但是在FF或其他浏览器中显示不出来。

那么<!--[ifIE6.0]>只有IE6能显示此块<![endif]-->

2,从IE5.0到IE7都能支持此注释功能。并且可精确到小数点后四位。如

<!--[ifIE5.1000]>只有IE5.1能显示此块<![endif]-->

3,条件注释前可加前缀,用于判断更高或更低版本。如:

<!--[if gt IE5]>只有IE5以上版本能显示此块(不包括IE5)<![endif]-->

<!--[if gte IE5]>只有IE5及以上版本能显示此块(包括IE5)<![endif]-->

<!--[if lt IE7]>只有IE7以下版本能显示此块(不包括IE7)<![endif]-->

<!--[if lte IE7]>只有IE7及以下版本能显示此块(包括IE7)<![endif]-->

注意:此注释写在html文件中,而不是css文件中

四,CSS Hack 汇总快查

屏蔽IE浏览器(也就是IE下不显示)

*:lang(zh) select {font:12px !important;} /*FF,可见,特别提醒:由于Opera最近的升级,目前此句只为FF所识别*/

select:empty {font:12px !important;} /*safari可见*/

这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。

仅IE7与IE5.0可以识别

*+html select {…}

当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。

仅IE7可以识别

*+html select {…!important;}

当面临需要只针对IE7做样式的时候就可以采用这个HACK。

IE6及IE6以下识别

* html select {…}

这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。

html/**/ >body select {…}

这句与上一句的作用相同。

仅IE6不识别,屏蔽IE6

select { display /*屏蔽IE6*/:none;}

这里主要是通过CSS注释分开一个属性与值,注释在冒号前。

仅IE6与IE5不识别,屏蔽IE6与IE5

select/**/ { display /*IE6,IE5不识别*/:none;}

这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5

仅IE5不识别,屏蔽IE5

select/*IE5不识别*/ {…}

这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。

盒模型解决方法

selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}

盒模型的清除方法不是通过!important来处理的。这点要明确。

清除浮动

select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}

在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。

截字省略号

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }

这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。

只有Opera识别

@media all and (min-width: 0px){ select {……} }

针对Opera浏览器做单独的设定。

以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器,只有IE5.x可见

@media tty {

i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}

}/* */

IE5/MAC的过滤器,一般用不着

/*\*//*/

@import "ie5mac.css";

/**/

DIV+CSS网页布局时需要知道的几个技巧_html/css_WEB-ITnose

本文向大家简单描述一下DIV CSS网页布局需要掌握的技巧,良好的习惯可能会使你的设计周期加倍缩短,下面让我们一起来学习吧。你对对DIV CSS网页布局需要掌握的技巧是否熟悉,这里和大家分享一下,良好的习惯可能会使你的设计周期加倍缩短。 以下是进行CSS设计时的几个小技巧 1.DIV CSS网页布局若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用,请见http://validator.w3.org。请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减。 2.DIV CSS网页布局时使用浮动功能时记得适当清除指令 浮动是个危险的功能,未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的。 3.边界重合时利用padding或border来避免 有事可能会为了一点不应该出现的空间而焦头烂额,或者您需要一点点空间时,怎样都挤不出来。如果您有用到margin,那么很容易产生边界的重合; 4.尝试避免同时对元素指定padding/border以及高度或宽度 Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题,但如果母元素需要指定高度与宽度时,最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时,在母元素套用padding以达效果。 5.DIV CSS网页布局时不要依赖min-width/min-height Windows版IE并不支援两种语法。但是在某种程度下,windows版IE可以达到相当于min-width/min-height的效果,所以只要对IE做点过滤功能,即可达到您想要的结果。 6.若有疑问,先减少百分比 有时候某些错误会使50%+50%成为100.1%,使网页出现问题。这时请尝试将这些值改为49%,甚至49.9%。 7.DIV CSS网页布局时记住写法(TRBL) Border,margin与padding的简写语法有特定顺序,从上方开始顺时针方向转动:top,right,bottom,left.所以margin:01px3px5px;的结果是上方无边界,右边1像素,以此类推。这样就不会弄错次序了。 8.只要不是零的值,都要指定单位 CSS需要您对每个font,Margin等各种值指定单位。唯一的例外就是Line-height

一个div跟随另一个div,但这个div有固定位置

新建一个html文件,命名为test.html,用于讲解如何将一个DIV相对于另外一个DIV进行绝对定位。

2/7
在test.html文件内,使用div创建一个模块,并设置其id为aa,主要用于下面通过该id使用css样式进行设置。

3/7
在test.html文件内,在上一步的div内,再创建一个div模块,并设置其id为bb。

4/7
在css标签内,对两个div进行css样式设置,定义其宽度为200px,高度为200px。

5/7
在css标签内,对id为aa的div进行css样式设置,定义其position位置属性为relative(相对定位),背景颜色为红色,为了显示明显的效果,这里定义该div距离页面顶部50px。

6/7
在css标签内,对id为bb的div进行css样式设置,定义其position位置属性为absolute(绝对定位),背景颜色为*,距离外部的div左边距离为30px,顶部距离为30px。

一个div跟随另一个div,但这个div有固定位置

新建一个html文件,命名为test.html,用于讲解如何将一个DIV相对于另外一个DIV进行绝对定位。

2/7
在test.html文件内,使用div创建一个模块,并设置其id为aa,主要用于下面通过该id使用css样式进行设置。

3/7
在test.html文件内,在上一步的div内,再创建一个div模块,并设置其id为bb。

4/7
在css标签内,对两个div进行css样式设置,定义其宽度为200px,高度为200px。

5/7
在css标签内,对id为aa的div进行css样式设置,定义其position位置属性为relative(相对定位),背景颜色为红色,为了显示明显的效果,这里定义该div距离页面顶部50px。

6/7
在css标签内,对id为bb的div进行css样式设置,定义其position位置属性为absolute(绝对定位),背景颜色为*,距离外部的div左边距离为30px,顶部距离为30px。

web前端如何实现一个div固定在某个位置

在前端里面,如何将一个div固定在某个位置,属于css内position定位的内容。position定位属性有五种类型,分别如下:

1.static 定位。html元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

2.fixed 定位。元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

3.relative 定位。相对定位元素的定位是相对其正常位置。

4.absolute 定位。绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于整个页面。

5.sticky 定位。粘性定位是基于用户的滚动位置来定位。它依赖于用户的滚动,在position:relative与position:fixed定位之间切换。

我用HTML中div+css写的网页,有的IE支持,有的IE就不支持,Goole直接错位。怎么解决这个兼容问题呢?

浏览器的不兼容,大家肯定都是深恶痛绝的,往往我们只是去做修补,却忘了更重要的事情,那就是追溯根源,避免类似的不兼容再次出现。在下不才,归纳几点html编码要素,望能指点各位:

1.文字本身的大小不兼容。同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。

解决方案:给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要,在高度上我们不能容忍1px 的差异。

2.ff下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而ie下是会被内容撑大,高度限定失效。所以不要轻易给容器定义height。

3.还讨论内容撑破容器问题,横向上的。如果float 容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie下则会优先考虑内容折行。故,内容可能撑破的浮动容器需要定义width。小实验:有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。

a.<div style=”border:1px solid red;height:10px”></div>

b.<div style=”border:1px solid red;width:10px”></div>

c.<div style=”border:1px solid red;float:left”></div>

d.<div style=”border:1px solid red;overflow:hidden”></div>

上面的代码在不同浏览器中是不一样的,实验起源于对小height 值div 的运用,<div style=”height:10px;overflow:hidden”></div>,小height 值要配合overflow:hidden一起使用。实验好玩而已,想说明的是,浏览器对容器的边界解释是大不相同的,容器内容的影响结果各不相同。

4.浮动的清除,ff下不清除浮动是不行的。纠正大家一个误区,遇到不兼容就说ff烂是不对的,其实更多时候是ie的奇怪表现让我们无所适从。以下列出ie6的种种劣迹。

5.最被痛恨的,double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案,给浮动容器定义display:inline。

6.mirrormargin bug,当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px。padding也会出现类似问题,都是ie6下的特产,该类bug 出现的情况较为复杂,远不只这一种出现条件,还没系统整理。解决方案:外层元素设定border 或 设定float。引申:ff 和ie 下对容器的margin-bottom,padding-bottom的解释有时不一致,似乎与之相关。

7.吞吃现象,限于篇幅,我就不展开了。还是ie6,上下两个div,上面的div设置背景,却发现下面没有设置背景的div 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。解决方案:使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

8.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案,ie6的这个bug 下,大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变。解决方案:用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。

9.<li/>里加 float <div/>,这是一个典型的,棘手的兼容问题,希望引起大家正视 ,给li 不同的属性会有不同的解释效果,ff下的解释稍可理解,ie6下的解释会让你摸不着头脑,由于问题的复杂性,将另起一文专门讨论该问题。在《ul使用心得》一文里有相关成果,却没给出问题解决的过程。

10.使用了“float:left;display:inline”的ul的奇怪表现。可以看出这句css是针对ie6下的double margin bug 而加上的display:inline,这也是我的css体系里的重要一环,在《ul使用心得》一文中有相关阐述。而这句css用在ul上会让你痛苦不堪。点到为止,这里不能多说哈。

11.img下的留白,大家看这段代码有啥问题:

<div>

<img src=”” mce_src=”” />

</div>

把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写

<div><img src=”” mce_src=”” /></div>

后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案:给img设定 display:block。

12.失去line-height。<div style=”line-height:20px”><img />文字</div>,很遗憾,在ie6下单行文字 line-height 效果消失了。。。,原因是<img />这个inline-block元素和inline元素写在一起了。解决方案:让img 和文字都 float起来。引申:大家知道img 的align 有 text-top,middle,absmiddle啊什么的,你可以尝试去调整img 和文字让他们在ie和ff下能一致,你会发现怎么调都不会让你满意。索性让img 和文字都 float起来,用margin 调整。

13.链接的hover状态。a:hover img{width:300px} 我们想让鼠标hover时,链接里包含的图片宽度变化,可惜在ie6下无效,ie7、ff下有效。

14.非链接的hover状态。div:hover{} 这样的样式ie6是不认的,在ie7、ff下才有效果。

15.block化的a链接,其内套absolute层,absolute层内放置img,ie下,鼠标点击img不会有链接效果,ff、op下正常。想不出来了,以后想到再加吧。上面的诸多问题如果你掌握了其中奥妙,90%的不兼容问题不需要另起css hack的。

16.无法彻底清除的float。如果让ul下的li具有了float属性,如何clear浮动的li呢?<ul><li class=”c”></li></ul> 或者 <ul><li><div>class=”c”></div></li></ul> 或者 <ul><li></li><div>class=”c”></div></ul> 或者 <ul><li></li></ul><div>class=”c”></div> 或者上述的组合?这个问题,我无法给出解答。下面有个例子与此相关

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

<style type=text/css>

.c{clear:both;overflow:hidden;+overflow:visible}

.bd{border:1px solid red}ul.ex{list-style:none;}

ul.ex li{float:left;border:1px solid green;}

</style>

<ul class=ex>

<li>sfsdfsfdf</li>

<li>sfsdfsfdf</li>

</ul>

<div class=c></div>

<div class=bd style=margin-top:19px>sfsdfsfdf</div>

请在ie下 测试,仅仅将 margin-top:19px 改为margin-top:20px 你发现什么了?要素:doctype必须有,ie6、ie7下margin-top:19px还好好的,margin-top:20px 就出问题了,无法解释。。。大家还可以将 clear 层换不同的位置测试。解决方案:给ul 属性zoom:1 (给li 加zoom:1 没用)引申:clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层,这样有问题,不仅仅是ff和op下失去margin效果,ie下某些margin值也会失效

<div style=”background:red;float:left;”>dd</div>

<div style=”clear:both;margin-top:18px;background:green”>ff</div>

17.ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案:给overflow:hidden加position:relative或者position:absolute。另,ie6支持overflow-x或者overflow-y的特性,ie7、ff不支持。

18.ie6下严重的bug,float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度。float元素如果作为布局用或复杂的容器,都要给个宽度的。

19.ie6下的bug,绝对定位的div下包含相对定位的div,如果给内层相对定位的div高度height具体值,内层相对层将具有100%的width值,外层绝对层将被撑大。解决方案给内层相对层float属性。

20.ie6下的bug,<head></head>内有<base target=”_blank”/>的情况下,position:relative层下的float层内文字无法选中。这个bug迫使我修公用样式库。

21.终于来了个ff的缺点。width:100%这个东西在ie里用很方便,会向上逐层搜索width值,忽视浮动层的影响,ff下搜索至浮动层结束,如此,只能给中间的所有浮动层加width:100%才行,累啊。追问这里只讲了ff和ie的呀,意思是这两个浏览器的兼容问题解决了,其他浏览器就不会错位了吗?

追答因为当前所有浏览器的内核基本上就3种,IE内核、Firefox内核、Google内核;我们经常用到、看到的基本都是前2种而已,而IE浏览器又分为好几个版本,几个版本兼容性也不一样

微宠网还为您提供以下相关内容希望对您有帮助:

css div 固定一个div 使这个div不随着网页的滚而滚动 就是把这个div固 ...

1、需要使用固定定位才能做到这样的效果。具体方法是首先打开html编辑器,首先设置一个容器div,然后设置一个用来演示效果的div,分别设置class属性名为container和fixed:2、在style标签中设置样式,设置container的position属性为相...

div如何嵌入html页面html用div嵌入网页

1、使用css中的flaot属性就可以了,首先打开Dreamweaver,创建html文件:2、然后先给页面设置背景颜色,创建段落两个段落,段落上面设置2张图片的float属性,分别让它们左右浮动,值为left和right,最后打开浏览器:3、打开浏览器...

一个div跟随另一个div,但这个div有固定位置

新建一个html文件,命名为test.html,用于讲解如何将一个DIV相对于另外一个DIV进行绝对定位。2/7 在test.html文件内,使用div创建一个模块,并设置其id为aa,主要用于下面通过该id使用css样式进行设置。...

web前端如何实现一个div固定在某个位置

1.static 定位。html元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。2.fixed 定位。元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。3....

怎么让一个DIV绝对定位到页面的正中间

1、首先,新建一个html文件。2、在html文件上找&lt;body&gt;标签,在&lt;body&gt;标签中创建&lt;div&gt;标签并设置class类:&lt;div&gt; fixed浮动居中 &lt;/div&gt; 3、对div设置基本属性。html文件找到&lt;title&gt;标签,在这个标签后新建一个&lt;style&gt;标签...

在做div+css过程中应该怎样解决浏览器的兼容问题呢?

其它浏览器不识别。html/**/ &gt;body select {…} 这句与上一句的作用相同。仅IE6不识别,屏蔽IE6 select { display /*屏蔽IE6*/:none;} 这里主要是通过CSS注释分开一个属性与值,注释在冒号前。

如何固定一个div在浏览器底部

1、首先新建一个html页面,然后在这个html代码页面创建一个&lt;div&gt;标签,同时给这个&lt;div&gt;添加一个class类为footer。2、然后设置footer类,把div固定在底部。创建&lt;style&gt;标签,在该标签内设置通过position: fixed;bottom:0设置...

我用HTML中div+css写的网页,有的IE支持,有的IE就不支持,Goole直接错位...

18.ie6下严重的bug,float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度。float元素如果作为布局用或复杂的容器,都要给个宽度的。19.ie6下的bug,绝对定位的div下包含相对...

如何让一个div在另一个div的上面,求高手指点

方法:这个用绝对定位就可以搞定了。position:absolute;举个例子:1.css代码 .div1{height:30px; width:100%; background:#fff; position:relative; z-index:1;}.div2{height:30px; width:100%; background:#f00; ...

一个DIV里,一边靠左,一边靠右,怎么实现?

具体实现步骤如下:1、设计一个html页面,一个标签元素div或者ul里,放入多行数据。2、设计最外层容器样式文件:3、设计每一行的样式:4、最后,设计靠右对齐的样式:5、此时页面展示如下:左右均实现了分别对齐。

Top