Question

我在使用CSS设置<div>标记的高度时遇到问题。

我正在使用以下CSS＆amp; HTML代码。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title></title>
</head>
<style>
body, p, b, ul, li, div
{
padding:0;
margin:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
}
div
{
display:block;
}

#ph_container
{
margin:0 auto;
width:980px;
height:auto;
border: 1px solid  #00CC33;
clear:both;
background: #F0F0F0;
}

#cp_search
{
height:100px;
clear:both;
margin:10px 0px 0px 0px;
border: 1px solid #0099FF;
}

#cp_search_ex
{
clear:both;
background:none;
margin-top:5px;
margin-left:27px;

}
#cp_search_tx
{
width:210px;
float:left; /*try here whitout float and see the difference that I want to get*/
margin:0px;
background:none;
}

.txtx
{
color: #000000;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
</style>
<body>

<div id="ph_container" class="space">
     <div id="cp_search">
        <div id="cp_search_ex" class="space"> 
          <div id="cp_search_tx" class="txtx" >SEARCH</div>
        </div>
      </div>
</div>

</body>
</html>

我的问题是，父div id="cp_search_ex"没有获得其中div id="cp_search_tx"的高度，它有height: 0px。

我希望div id="cp_search_ex"从div id="cp_search_tx"获取高度？

我在CSS代码中写了一条评论，请关注。

Answer 1

尝试将其添加到父div的样式中（因此它们完全包含它们的浮动子项）：

overflow:hidden;

非常复杂的帖子 - 如果您可以将其削减到显示您遇到的问题的特定示例，那将会有所帮助。

Answer 2

我相信您正在使用“clearfix”来解释问题。

Answer 3

CSS中至少有一个错误。你已经设置了两次高度...

#ph_container{
   margin:0 auto;
   width:980px;
   height:auto; /* duplicated height */
   border: 1px solid  #00CC33;
   clear:both;
   background: #F0F0F0;
   height:100%;  /* duplicated height */
}

因此，如果您希望父级获取其内容的高度，那么您需要删除height:100%，因为这会告诉父级是100％只是 >外部父母......在你的情况下，这是body身高的100％。

cp_search_tx无法扩展其容器的大小，因为它是float:。 By definition，浮点数不在正常的内容流中，因此它们的容器元素看起来是空的。

在内容下添加空清算div，迫使容器div动态展开。

<div id="cp_search_ex" class="space"> 
    <div id="cp_search_tx" class="txtx" >SEARCH</div>
    <div style="clear:both;"></div>
</div>

或者，只需将overflow:hidden添加到容器中也会强制它扩展以包含任何浮动。

Answer 4

使用clearfix方法。我通常使用

.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

* html .clearfix,
*:first-child+html .clearfix {
    zoom: 1;
}

将类clearfix应用于ph_container，看看是否修复了它。

Answer 5

这个问题没有多大意义，外部块占用100px +边距，因此可行。

text元素已定义float，因此不占用空间。

使用CSS设置div的高度

5 个答案: