1 
               .block    
               {
                width:540px;
                margin:20px;
                padding:10px;
                border:1px solid Gray;
               }

              <div id="header" class="block">
                <div id="pe" class="text">
                  <b>Name :</b> <span>King</span><br />
                  <b>Surname :</b> <span>Kong</span>
                </div>
                <div id="area" class="text">
                  <span id="city">Abcs</span><b>/</b>
                  <span id="state">Bcsdf</span>
                </div>
              </div>​

如果你在 Jsfiddle 中运行上面的代码，那么它会显示 aborder around the text和the important thing is that，height of the block class is auto所以它会自动调整它的高度。

但是当我添加以下 css 时问题就来了：

 #pe
 {
  float:left;
 }
 #area
 {
   float:right;
 }​

现在的高度div.block不是自动设置的。谁能告诉我这个问题？

4

8 回答 8

2

添加浮动：左；在你的块类中。

于 2012-06-01T11:09:46.113 回答
1

因为 float 将它们从当前流中取出。它们不在块 div 中的位置，使用定位和显示：内联让它们按照你想要的方式排列

于 2012-06-01T11:04:22.127 回答
1

您可以使用绝对定位，其中外部元素设置为 height:auto，内部 #pe 和 #area 设置为 height:100%。

看看这个答案：How to make a floated div 100% height of its parent?

于 2012-06-01T11:04:27.667 回答
1

那是因为它们不再是文档通用流程的一部分。

解决方案可能是display: block在块类中设置，然后通过使用和position: absolute在该块中定位元素left: 0right: 0

于 2012-06-01T11:05:22.060 回答
1

只需添加溢出：隐藏到类“块”。

 .block{
   width:540px;
   margin:20px;
   padding:10px;
   border:1px solid Gray;
   overflow:hidden;
 }

这是小提琴：http: //jsfiddle.net/rWuBF/

于 2012-06-01T11:07:40.680 回答
1

我将添加overflow:hidden到包含元素 ( #header)。那应该解决它。

于 2012-06-01T11:07:56.567 回答
1

现在你需要一个 Clearfix

.clearfix:after{
clear:both;
line-height:0;
height:0;
display:block;
background-color:transparent;
border:none;
content: ".";
visibility:hidden;
 }

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
 }

你像这样添加它

"<div id = "header" class="block clearfix"></div>"
于 2012-06-01T12:01:52.927 回答
0

虽然有点脏，但您也可以在浮动元素之后添加一些清除两者的内容。

<div id="header" class="block">
  <div id="pe" class="text"> ... </div>

  <div id="area" class="text"> ... </div>

  <div style="clear:both;"></div>
</div>

还有更清晰的“clearfix”变体，这将使您清楚：两者都无需添加非语义标记。 http://www.positioniseverything.net/easyclearing.html

于 2012-06-01T11:15:00.953 回答