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 thatheight of the block class is auto

しかし、次のcssを追加すると問題が発生します。

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

これで、の高さはdiv.block自動的に設定されません。誰か教えてもらえますか？

4

8 に答える 8

2

float：leftを追加します。ブロッククラスで。

于 2012-06-01T11:09:46.113 に答える
1

フロートがそれらを現在の流れから取り除くからです。それらは、ブロックdiv内にあるのと同じようにはありません。ポジショニングとdisplay：inlineを使用して、希望どおりに整列させます。

于 2012-06-01T11:04:22.127 に答える
1

絶対配置を使用できます。この場合、外側の要素はheight：autoに設定され、内側の#peと#areaはheight：100％に設定されます。

この答えを見てください：フロートdivをその親の100％の高さにする方法は？

于 2012-06-01T11:04:27.667 に答える
1

これは、それらがドキュメントの一般的なフローの一部ではなくなったためです。

display: block解決策は、ブロッククラスに設定してから、を使用しposition: absoluteてそのブロック内に要素を配置することです。left: 0right: 0

于 2012-06-01T11:05:22.060 に答える
1

クラス「block」にoverflow：hiddenを追加するだけです。

 .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 に答える