如何獲得具有自動高度和浮動div的容器Div？

我有以下的HTML如何獲得具有自動高度和浮動div的容器Div？

<style type="text/css"> 
<!-- 
.msg_ok{ 
    font-family: "Trebuchet MS"; 
    font-weight: bold; 
    font-size: 16px; 
    margin:0 auto; 
    padding:10px; 
    width:500px; 
    height:auto; 
    display:block; 
} 
.msg_ok{ 
    background-color:#DCFFB9; 
    border:#003300 1px solid; 
    color:#003500; 
} 
--> 
</style> 

     <div class="msg_ok" style="height:auto;"> 

     <div style="display:block;float:left;width:350px; height:auto;"> 
      <p>line 1<br> 
      line2<br> 
      line3<br> 
      line4<br> 
      line5<br> 
      </p> 
     </div> 
     <div style="display:block;float:left;width:100px; height:auto;"> 
     <a href="#">Print</a> 
     </div> 

     </div>

我得到這樣的結果

enter image description here

但是我怎麼能得到像下面這樣的div容器與適合其大小自動高度結果與浮動divs裏面？

enter image description here

在此先感謝

來源

2012-03-06 Max

添加這些

.msg_ok{ 
    overflow:hidden; 
    zoom:1; 
}

，並刪除height:auto，這是無用的，因爲高度總是自動（默認）。您正面臨的問題是如何包含浮游物

來源

2012-03-06 11:19:19 Joseph

參見[此頁]（http://www.positioniseverything.net /easyclearing.html）以獲取有關包含浮點數的不同方法的詳細信息。 – CherryFlavourPez 2012-03-06 11:22:26

您需要在清除浮游物的浮動元素之後添加一個元素。一般：

<br style="clear:both" />

來源

2012-03-06 11:21:43 aaroncatlin

我認爲你正在尋找明確的修復「黑客」，以避免母失去它的高度時，它包含浮動元素，對不對？

添加<div class="clear"> </div>最後浮動DIV後，然後用下面的CSS：

.clear { 
    float: none; 
    clear: both; 
    height: 0; 
}

來源

2012-03-06 11:22:06

最好的方法是使用clearfix。請參閱此鏈接 - http://css-tricks.com/snippets/css/clear-fix/

來源

2012-03-06 11:35:16

試試這個

Jsfiddle height auto

製作的顯示屬性設置爲「inline-block的」爲MSG_OK類

來源

2012-03-06 11:47:36

如何獲得具有自動高度和浮動div的容器Div？

回答

相關問題