它是标准的浮动问题.在父容器div中有一堆浮动元素.由于孩子是浮动的,因此父母不会扩展以包括所有孩子.
我知道clearfix解决方案以及将父容器div上的overflow属性设置为"auto"或"hidden".http://www.quirksmode.org/css/clearing.html 对我来说,设置overflow方法看起来好像只是一个属性.我想要了解的是,clearfix方法何时优于此方法,因为我发现它经常使用.
PS我不关心IE6.
我有一个div缠着两个孩子,一个漂浮在左边,另一个漂浮在右边.我想在孩子周围放置一个边框和背景,但div有0高,因为它不会调整大小以适应孩子.
以下是它的实例:http: //jsfiddle.net/VVZ7j/17/
我希望红色背景一直向下.我试过身高:自动,但那没用.
任何和所有的帮助将不胜感激,谢谢.
PS我不想使用任何JavaScript,如果可能的话.
我需要一个函数来获得div中最高元素的高度.
我有一个元素,里面有许多其他元素(动态生成),当我使用$(elem).height()询问容器元素的高度时,我得到的高度比它里面的一些内容要小.内部的一些元素是大于该元素所具有的大小的图像.
我需要知道最高元素,所以我可以得到它的高度.
好吧,所以这似乎是一个非常愚蠢的问题,但我无法让我的容器div继承其中浮动元素的高度.由于我需要集中容器div,我不能使用float来解决这个问题.这是我的css:
#container {
margin: 0 auto;
width: 1000px;
border-left: 1px solid #f1f1f1;
border-right: 1px solid #f1f1f1;
border-bottom: 1px solid #f1f1f1;
}
#focus {
padding-left: 23px;
width: 977px;
padding-top: 20px;
padding-bottom: 23px;
border-bottom: 1px solid #f1f1f1;
float: left;
}
.rslider {
float: left;
width: 600px;
margin-left: 15px;
}
.welcome {
float: left;
width: 300px;
}
HTML:
<div id="container">
<div id="logo_block">
<a href="#"><img src="img/logo.jpg" alt="" /></a>
</div>
<div id="focus">
<div class="welcome">
<h1>All About This Page</h1>
<p>Donec quam felis, ultricies nec, pellentesque eu, …我的代码总是充满了<div>用于清除/扩展div以使其正确的代码.每当它看起来不正确时,我添加一个<div style="clear:both;">,它解决了IE7中的问题.
我该如何避免这样做？我搞砸了overflow:auto,overflow:hidden我一无所获.
提前致谢
我有一个包装器<div>,其中包含两个<div>浮动的内部.
<div class="outside" style="border:1px solid #555;">
<div class="inside" style="float:left; width:40px;">CONTENT</div>
<div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>
问题是包装器的<div>宽度为80px,因为两个内部<div>的每个都是40px.但总是包装<div>是0px在高度,这使得边框看起来像是在顶部线.
所以我将两个内部<div>放在一个内部<table>.它运作良好.但是如何避免这个问题<table>呢？
我已经阅读了一些关于它的文章,但没有得到实际的内容.任何人都可以解释我.
它只与IE6有关吗？
这是什么zoom:1？
是layoutIE只有TAG吗？
编辑:
我发现这个信息对我来说非常有用
因为Internet Explorer太旧了(因为它是第一批可用的浏览器之一),所以它没有像现有浏览器那样重新开始.随着时间的推移,微软开始采用新引擎来利用CSS.看起来很好......然而,CSS改变了Internet Explorer引擎所基于的基本假设 - 任何重要的东西都是包含其所有内容的矩形.
因此,为了处理新的CSS标准,微软决定通过实现hasLayout属性来修复他们的古老引擎,而不是重建IE.Internet Explorer中的每个元素现在都具有hasLayout属性.根据元素,默认情况下设置为true或false.如果hasLayout设置为true - 该元素是一个独立的框,负责渲染自身.如果为false - 则元素依赖于hasLayout设置为true的父元素来呈现它.这是大多数IE漏洞变为现实的地方.
来源:http://bytesizecss.com/blog/post/fix-haslayout-with-one-line-of-css
我在这里又找到了一个讨论:http://www.molly.com/2007/03/30/back-to-work-someone-please-clearly-articulate-haslayout/
我做css菜单.为此,我使用ul.当我向左浮动时,所有lis都在ul之外.我的意思是ul的高度变为零.如何在向左浮动后使li显示在ul内.
一种方法是使用一些公共类创建一个div标签,然后添加clear:在css中都可以使用它,但我不希望这样.我需要更好的解决方案 请帮忙
我知道这个问题已被要求死亡,但通过搜索没有任何东西对我有用.
你知道这个交易,我有一个div元素,我需要垂直对齐文本,但没有任何工作(位置:绝对;顶部:50%; margin-top:-x;显示:table-cell; vertical-align:middle等等)
这是我正在使用的内容(抱歉内联CSS).无论如何,我会使用行高,但文本可以是一行或两行.它应与图像垂直对齐,图像总是最大高度为30px(30x50).
<div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;">
<div style="float:left;width:55px;height:40px;">
<a href="link"><img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" /></a>
</div>
<div style="float:right;width:155px;font-size:0.7em;height:40px;">
<a href="link">This is the text to vertically align</a>
</div>
</div>
父div如何根据孩子的身高自动调整身高？
div#main{
width: 970px;
height: 100px;
background: rgba(255,0,0,1);
border: 5px solid rgb(251,151,117);
margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
padding: 10px
}
div#left{width: 383px;
height: 100%;
margin-right: 5px;
background: rgb(0,0,255);
float:left
}
div#description{width: 100%;
height: 50%;
background: rgb(0,0,0)
}
div#following{width: 100%;
height: 50%;
background: rgb(0,255,0)
}
div#posts{width: 577px;
height: auto;
margin-left: 5px;
background: rgb(255,255,0);
float: right
}<div id="main">
<div id="left" class="cell">
<div id="description" class="cell">
</div>
<div id="following" class="cell">
</div>
</div>
<div id="posts" class="cell">
there are some …