我想问一下高度和浮动是如何工作的。我有一个外部div和一个内部div,其中有内容。它的高度可能会根据内部div的内容而变化,但似乎我的内部div将溢出它的外部div。什么是正确的方法呢?
< html > <身体> < span style=" font - family:宋体;最小高度:100 px;背景颜色:橙色”> < div风格= "宽度:500 px;身高:200 px;背景颜色:黑色;浮:对" > < / div > < / div > < /身体> < / html >
我想问一下高度和浮动是如何工作的。我有一个外部div和一个内部div,其中有内容。它的高度可能会根据内部div的内容而变化,但似乎我的内部div将溢出它的外部div。什么是正确的方法呢?
< html > <身体> < span style=" font - family:宋体;最小高度:100 px;背景颜色:橙色”> < div风格= "宽度:500 px;身高:200 px;背景颜色:黑色;浮:对" > < / div > < / div > < /身体> < / html >
当前回答
你可以使用溢出属性的容器div,如果你没有任何div显示在容器上,例如:
<div class="cointainer">
<div class="one">Content One</div>
<div class="two">Content Two</div>
</div>
下面是下面的css:
.container{
width:100%;/* As per your requirment */
height:auto;
float:left;
overflow:hidden;
}
.one{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.two{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
----------------------- 或 ------------------------------
<div class="cointainer">
<div class="one">Content One</div>
<div class="two">Content Two</div>
<div class="clearfix"></div>
</div>
下面是下面的css:
.container{
width:100%;/* As per your requirment */
height:auto;
float:left;
overflow:hidden;
}
.one{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.two{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.clearfix:before,
.clearfix:after{
display: table;
content: " ";
}
.clearfix:after{
clear: both;
}
其他回答
试试这个
.parent_div{
display: flex;
}
你可以使用溢出属性的容器div,如果你没有任何div显示在容器上,例如:
<div class="cointainer">
<div class="one">Content One</div>
<div class="two">Content Two</div>
</div>
下面是下面的css:
.container{
width:100%;/* As per your requirment */
height:auto;
float:left;
overflow:hidden;
}
.one{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.two{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
----------------------- 或 ------------------------------
<div class="cointainer">
<div class="one">Content One</div>
<div class="two">Content Two</div>
<div class="clearfix"></div>
</div>
下面是下面的css:
.container{
width:100%;/* As per your requirment */
height:auto;
float:left;
overflow:hidden;
}
.one{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.two{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.clearfix:before,
.clearfix:after{
display: table;
content: " ";
}
.clearfix:after{
clear: both;
}
这是因为div的浮动。添加overflow:隐藏在外部元素。
<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
<div style="width:500px; height:200px; background-color:black; float:right">
</div>
</div>
Demo
你遇到了浮动错误(虽然我不确定它在技术上是否是一个错误,因为有多少浏览器表现出这种行为)。事情是这样的:
在正常情况下,假设没有显式地设置高度,块级元素(如div)将根据其内容设置其高度。父div的底部将超出最后一个元素。不幸的是,浮动元素会阻止父元素在确定其高度时考虑被浮动元素。这意味着如果你的最后一个元素是浮动的,它不会像普通元素那样“拉伸”父元素。
清算
有两种常见的方法可以解决这个问题。第一种是添加一个“清算”元素;也就是说,在被浮动元素之下的另一个元素将强制父元素拉伸。所以添加下面的html作为最后一个子元素:
<div style="clear:both"></div>
它不应该是可见的,通过使用clear:both,可以确保它不会位于被浮动元素的旁边,而是在它之后。
溢出:
第二种方法,也是大多数人(我认为)更喜欢的方法是改变父元素的CSS,这样溢出就不会“可见”。因此,将overflow设置为“hidden”将迫使父对象延伸到被浮动子对象的底部之外。当然,这只在你没有在父节点上设置高度的情况下才成立。
正如我所说,第二种方法是首选的,因为它不需要向标记中添加语义上无意义的元素,但有时需要溢出可见,在这种情况下,添加清除元素是可以接受的。
你需要添加overflow:auto到你的父div,以包含内部浮动的div:
<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange;overflow:auto">
<div style="width:500px; height:200px; background-color:black; float:right">
</div>
</div>
jsFiddle例子