中关村在线

软件

多div在父div中的定位技巧

编写HTML时发现,在Firefox等遵循W3C标准的浏览器中,若外层DIV包含设置了float样式的内层DIV,由于内部未进行clear处理,外层容器无法自动伸展以包裹浮动元素,从而导致布局异常。

1、 外部红色边框的DIV未被撑开,原因是内部的DIV设置了float:left,导致其脱离了标准文档流,失去了clear:both和display:block的特性,从而使父容器无法感知其高度,无法自动扩展。

2、 在容器DIV中,所有设置了float:left的子元素后面,添加一个样式为clear:both的DIV。这个额外的DIV起到了清除浮动的作用,确保父容器能够正确包含浮动元素,避免布局错乱,从而实现预期的显示效果。

3、 使用Dojo实现拖拽功能时,若被拖动的DIV是容器的直接子节点,移动该节点可能导致页面布局错乱,从而引发排版问题。

4、 当包含蓝色边框的DIV被移至另一DIV之后,由于设置了clear:both,该元素将被迫另起一行显示。

5、 调整HTML结构,使外层DIV容器应用指定的CSS样式。

6、 HTML4严格模式代码规范

展开全文
人赞过该文
内容纠错

相关电商优惠

评论

更多评论
还没有人评论~ 快来抢沙发吧~

读过此文的还读过

点击加载更多

内容相关产品

说点什么吧~ 0

发评论,赚金豆

收藏 0 分享
首页查报价问答论坛下载手机笔记本游戏硬件数码影音家用电器办公打印 更多

更多频道

频道导航
辅助工具