`
- 浏览:
3554993 次
- 性别:
- 来自:
杭州
-
让<a>标签显示再#left的右侧,写如下代码,想要#layout也被撑开,发现ie6,ie7正常,但ie8与ff中#layout的高度与a标签相同,没有被撑开。例:<div id="layout"> <div id="left"> <strong>XML</strong> <p>前推荐遵循的是W3C于2000年10月6日发布的XML1.0和HTML一样,XML同样来源于SGML,但XML是一种能定义其 它语言的语。<br /><br /> XML最初设计的目的是弥补HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述。</p> </div> <a href="http://xiaogai1010.blog.163.com/blog/#">链接1</a> <a href="http://xiaogai1010.blog.163.com/blog/#">链接2</a> <a href="http://xiaogai1010.blog.163.com/blog/#">链接3</a> <a href="http://xiaogai1010.blog.163.com/blog/#">链接4</a> </div><style type="text/css"><!--a:hover { background-color:#fff;}#layout { border: #35bb0c 5px solid; width: 400px; background-color: #f2f2f2;}#left { border: #d4ca25 5px solid; width: 200px; float: left; background-color:#fff;}--></style>解决方法:(与几种闭合浮动标签的方法相似)(1)给#layout加属性:{float:left;}(2)给#layout加属性:{overflow:hidden}(3)给#layout加属性:{display:table}(4)#layout:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; zoom:1}四种方法都可以使#layout被float元素撑开
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
标题和描述中提到的问题正是关于这个需求:如何让内部的 `div` 撑开外部的 `div`,使得外部 `div` 的高度能随内容增多而自适应。 在正常情况下,如果内部 `div` 的内容高度超过外部 `div` 的固定高度,外部 `div` ...
这两个容器分别包裹了左右两列的内容,通过设置外部容器的宽度为750px,并使用margin: 0px auto实现水平居中。 接着,.da_div下的两个子元素使用了CSS的float属性,.top_200设置为向左浮动,宽度为200px,而另一子...
**总结**: 外部容器的定位方式决定了其是否能够自适应宽度,通常选择 `float: left;` 或 `position: absolute;`。内部元素则必须使用 `position: relative;` 并且通过 `right: 50%;` 实现水平居中。 #### 二、垂直...
外部包裹的div应避免固定高度,而使用 `overflow: hidden` 以实现自适应。 **7. 手形光标** IE与标准浏览器对光标的处理不同,应分别设置 `cursor: pointer` 和 `cursor: hand`。 **8. IE6双倍边距BUG** IE6中,...
中间栏被放在最前面,外部有一个包裹容器。CSS代码如下: ```css #container { position: relative; } .center_wrap, .left, .right { float: left; min-height: 500px; } .center_wrap { width: 100%; }...
在这种方法中,我们首先定义一个外部容器,该容器将包含两个子,分别用于左侧和右侧内容。左侧内容通过设置CSS属性`position: absolute;`和指定宽度(如300px),可以轻易地将其固定在容器的左侧。而右侧内容则简单...
- 父容器因为子元素浮动而高度塌陷。 - 不同浏览器对float的渲染结果不一致,导致布局错乱。 - 特别是在IE6/IE7等旧版本浏览器中,float的兼容性问题更加显著。 2. 兼容性问题的具体案例 在文档中提到的情况是,一...
当一个元素触发BFC时,它会在自己的区域内进行渲染,不会受到外部的影响。我们可以通过设置`overflow`属性(非`visible`值)来触发BFC。在右侧`div`中,我们将其`overflow`设置为`hidden`,创建了一个BFC。 代码...
如果`.child` 设置了 `float: left` 或 `float: right`,它将会浮动到父元素的左侧或右侧,而`.parent`则不会根据`.child`的高度自适应。这可能导致`.parent`的显示不完整,因为它无法检测到内部浮动元素的真实高度...
3. **万能float闭合(Clear Fix)**:在CSS布局中,浮动元素可能导致其容器高度无法正确计算。为了解决这个问题,可以使用一种名为Clear Fix的方法。这通常涉及在浮动元素的父元素上添加一个类,如`.clearfix`,然后...
6. 外部wrapper高度:外部包裹div不要设定固定高度,使用`overflow: hidden`可实现高度自适应。 7. 光标样式:`cursor: pointer`适用于所有现代浏览器,而`hand`仅适用于IE。 四、样式兼容技巧 使用!important Hack...
但需要注意的是,由于浮动元素的影响,外层容器的高度可能不会自动扩展以包含所有的内容,这可能导致边框显示不完整。 为了解决这个问题,我们需要清除浮动(clear the float)。一种常见的方法是添加一个具有`...
BFC 是 Block Formatting Context 的缩写,指的是页面上一个独立的容器,容器内部的子元素不会影响到外部的元素。BFC 的区域有一个独立的块级渲染区域,该区域有一个套渲染规则来约束盒子的布局,与外部的区域没有...
- 在某些情况下,尤其是IE浏览器中,可能会遇到1px高度的容器无法正确显示的问题。这通常可以通过增加容器的 `overflow` 属性来解决。 4. **Firefox关于DIV高度无法自适应** - Firefox和其他现代浏览器默认情况...
6. **自适应高度**:使用`float`属性可以让子元素自动扩展其父元素的高度,实现自适应效果。 综上所述,虽然IE与Firefox在处理CSS时存在差异,但通过采取适当的解决策略,可以有效地提高网站在不同浏览器中的兼容性...
标题和描述中提到了关于使用JavaScript实现一个浮动的div元素能够在浏览器窗口变化时仍然保持自适应居中显示的解决方案。通过使用jQuery库来获取外围div元素的宽度,并根据其宽度来动态计算内部浮动div的位置。这个...
- **外部 wrapper 的高度**:作为外部包裹层的`div`不要固定高度,最好加上`overflow: hidden`以实现高度自适应。 - **光标样式**:使用`cursor: pointer`而不是仅适用于IE的`hand`。 #### 四、针对不同浏览器的CSS...
- **外部包裹`div`的高度自适应**:为了避免高度问题,建议不要给作为外部包装的`div`设定固定高度,并添加`overflow: hidden;`。 - **手形光标兼容**:`cursor: pointer;`适用于大多数现代浏览器,而`hand`仅适用于...
- **计算高度**:BFC可以正确计算自身高度,包括浮动元素的高度,用于自适应布局。 4. **BFC的布局规则**: - BFC内部的块级元素从顶部开始垂直布局。 - 同一BFC内,相邻的块级元素的margin会发生垂直塌陷...