如何使div自动宽到足以容纳漂浮的孩子？

Question

如何使div自动宽到足以容纳漂浮的孩子？

<div class="Parent"> <!-- 3 Children, should be 450px wide-->
  <div class="Child"></div>
  <div class="Child"></div>
  <div class="Child"></div>
</div>
<div class="Parent"> <!-- 2 children, should be 300px wide-->
  <div class="Child"></div>
  <div class="Child"></div>
</div>

Child divs都是“float：left”，具有固定的宽度。如何让Parent div等于浮动子的宽度？每个父母的子女数量各不相同，但未知，但孩子们必须连续排队，而不必换行。

示例：如果所有三个子节点都是150px，则父节点应该变为450px，以便没有子节点包裹。如果有两个150px的孩子，父母应该变成300px。

以下是问题的演示：

#MainNavBar {
    background:url('../assets/design/images/MainNavGrad.jpg') repeat-x scroll 0 0 transparent;
    height:43px;
    margin-bottom:10px;
}


.NavSpace {
   background:url('../assets/design/images/NavSpacer.jpg');
   float:left;
   width:2px;
   height:100%;
}



/*------------------------------------*\
   NAV
\*------------------------------------*/
#nav{
   float:left;
   width:100%;
   list-style:none;
   font-weight:bold;
   margin-bottom:10px;
}
#nav li{
   float:left;
   margin-right:10px;
   position:relative;
   display:block;
}

a.MainNavButton{ /*Main Buttons */
   text-transform:uppercase;
   font-family:verdana;
   font-weight:bold;
   font-size:11px;
   text-align:center;
   text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Text shadow to lift it a little */
   color:#fff;  
   display:block;
   padding:12px 21px 16px 21px ; /* TOP LEFT Bottom RIGHT */     
   -moz-border-radius:2px;
   -webkit-border-radius:2px;
   border-radius:2px;
}

#nav li a:hover{
   color:#fff;
   background:#444444;  /* Solid colour fall-back */
   text-decoration:underline;
}

/*--- DROPDOWN ---*/

/*
 * <div class="SubNavWrapper">
   <div class="SubNav">
      <div class="SubNavSectionWrapper">
         <h5>List 1</h5>
         <ul class="SubNavSectionList">
            <li><a href="#">The product</a></li>
            <li><a href="#">Meet the team</a></li>
         </ul>
      </div>
      <div class="SubNavSectionWrapper">
         <h5>List 2</h5>
         <ul class="SubNavSectionList">
            <li><a href="#">The product</a></li>
            <li><a href="#">Meet the team</a></li>
         </ul>
      </div>
   </div>
</div><!-- END Nav Pad-->
*/


div.SubNavWrapper {   
   float:left;
   padding:30px;
   padding-top:0px;
   position:absolute;
   background:transparent;
   left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}

div.SubNav {
   float:left;
   clear:both;
   padding:30px;
   border:1px solid #222;
   border-top:none;
   background:#444;
}

div.SubNavSectionWrapper {   
   float:left;
   width:150px;
   height:200px;
   margin-right:45px;
}

div.SubNavSectionTitle { /* Title of a sub-section */
text-transform:uppercase;
font-family:verdana;
font-weight:bold;
font-size:11px;
padding-bottom:3px;
margin-bottom:3px;
border-bottom:1px solid #333;
color:#fff;  
}

ul.SubNavSectionList {
   list-style:none;
}

ul.SubNavSectionList li{
   padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
}

ul.SubNavSectionList li a { /* Sub Menu Links */
font-family:verdana;
font-weight:bold;
font-size:11px;
color:#fff;
padding:4px 0px;
}

ul.SubNavSectionList a{
   white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
   display:block;
}

#nav li:hover div.SubNavWrapper{ /* Display the dropdown on hover */
   left:-30px; /* Bring back on-screen when needed */ /* must match SubNavWrapper!! */
   opacity:1; /* Fade to opaque */
}

#nav li:hover a{ /* Set styles for top level when dropdown is hovered */
   background:#444444; /* Solid colour fall-back */
   text-decoration:underline;
}

#nav li:hover ul.SubNavSectionList a{ /* Override some top level styles when dropdown is hovered */
   text-decoration:none;
}

#nav li:hover ul.SubNavSectionList li a:hover{ /* Set styles for dropdown when items are hovered */
   background:#333; /* Solid colour fall-back */
   text-decoration:underline;
}

<div id="MainNavBar">         
<ul id="nav">
    <li>
       <a class="MainNavButton" href="#">Home</a>
    </li>    
    <li><!-- Animals Menu -->
       <a class="MainNavButton" href="#">Animals</a><!-- hover over me to show the "animals" menu -->
       <div class="SubNavWrapper"> <!-- This is a wrapper that is absolutly positioned off the screen, until
                                             the "animals" link is hovered over -->                  
          <div class="SubNav"><!-- This is a parent with floating children -->
              <!-- this is a child that floats left -->
              <div class="SubNavSectionWrapper">                        
                <div class="SubNavSectionTitle">Fish</div>
                <ul class="SubNavSectionList">
                   <li><a href="#">Gold Fish</a></li>
                   <li><a href="#">Barracuda</a></li>
                </ul>
             </div>
             <!-- this is a child that floats left -->
             <div class="SubNavSectionWrapper">
                <div class="SubNavSectionTitle">Reptiles</div>
                <ul class="SubNavSectionList">
                   <li><a href="#">Lizzards</a></li>
                   <li><a href="#">Snakes</a></li>
                   <li><a href="#">Iguanas</a></li>
                </ul>
             </div>
             
             <!-- this is a child that floats left -->
             <div class="SubNavSectionWrapper">
                <div class="SubNavSectionTitle">Birds</div>
                <ul class="SubNavSectionList">
                   <li><a href="#">Parakeets</a></li>
                </ul>
             </div>              
          </div><!-- END SubNav -->
       </div><!-- END SubNavWrapper -->
    </li><!-- END Animals Menu -->
</ul>  
</div> <!-- END Nav Bar -->

当你将鼠标悬停在动物身上时，可以看到鸟类，爬行动物和鱼类堆叠在一起。它们应该并排显示。

这就是我想要的样子：

#MainNavBar {
   background:url('../assets/design/images/MainNavGrad.jpg') repeat-x scroll 0 0 transparent;
   height:43px;
   margin-bottom:10px;
}


.NavSpace {
   background:url('../assets/design/images/NavSpacer.jpg');
   float:left;
   width:2px;
   height:100%;
}



/*------------------------------------*\
   NAV
\*------------------------------------*/
#nav{
   float:left;
   width:100%;
   list-style:none;
   font-weight:bold;
   margin-bottom:10px;
}
#nav li{
   float:left;
   margin-right:10px;
   position:relative;
   display:block;
}

a.MainNavButton{ /*Main Buttons */
   text-transform:uppercase;
   font-family:verdana;
   font-weight:bold;
   font-size:11px;
   text-align:center;
   text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Text shadow to lift it a little */
   color:#fff;  
   display:block;
   padding:12px 21px 16px 21px ; /* TOP LEFT Bottom RIGHT */     
   -moz-border-radius:2px;
   -webkit-border-radius:2px;
   border-radius:2px;
}

#nav li a:hover{
   color:#fff;
   background:#444444;  /* Solid colour fall-back */
   text-decoration:underline;
}

/*--- DROPDOWN ---*/

/*
 * <div class="SubNavWrapper">
   <div class="SubNav">
      <div class="SubNavSectionWrapper">
         <h5>List 1</h5>
         <ul class="SubNavSectionList">
            <li><a href="#">The product</a></li>
            <li><a href="#">Meet the team</a></li>
         </ul>
      </div>
      <div class="SubNavSectionWrapper">
         <h5>List 2</h5>
         <ul class="SubNavSectionList">
            <li><a href="#">The product</a></li>
            <li><a href="#">Meet the team</a></li>
         </ul>
      </div>
   </div>
</div><!-- END Nav Pad-->
*/


div.SubNavWrapper {   
   float:left;
   padding:30px;
   padding-top:0px;
   position:absolute;
   background:transparent;
   left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}

div.SubNav {
   float:left;
   clear:both;
   width:600px;
   padding:30px;
   border:1px solid #222;
   border-top:none;
   background:#444;
}

div.SubNavSectionWrapper {   
   float:left;
   width:150px;
   height:200px;
   margin-right:45px;
}

div.SubNavSectionTitle { /* Title of a sub-section */
text-transform:uppercase;
font-family:verdana;
font-weight:bold;
font-size:11px;
padding-bottom:3px;
margin-bottom:3px;
border-bottom:1px solid #333;
color:#fff;  
}

ul.SubNavSectionList {
   list-style:none;
}

ul.SubNavSectionList li{
   padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
}

ul.SubNavSectionList li a { /* Sub Menu Links */
font-family:verdana;
font-weight:bold;
font-size:11px;
color:#fff;
padding:4px 0px;
}

ul.SubNavSectionList a{
   white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
   display:block;
}

#nav li:hover div.SubNavWrapper{ /* Display the dropdown on hover */
   left:-30px; /* Bring back on-screen when needed */ /* must match SubNavWrapper!! */
   opacity:1; /* Fade to opaque */
}

#nav li:hover a{ /* Set styles for top level when dropdown is hovered */
   background:#444444; /* Solid colour fall-back */
   text-decoration:underline;
}

#nav li:hover ul.SubNavSectionList a{ /* Override some top level styles when dropdown is hovered */
   text-decoration:none;
}

#nav li:hover ul.SubNavSectionList li a:hover{ /* Set styles for dropdown when items are hovered */
   background:#333; /* Solid colour fall-back */
   text-decoration:underline;
}

<div id="MainNavBar">         
<ul id="nav">
    <li>
       <a class="MainNavButton" href="#">Home</a>
    </li>    
    <li><!-- Animals Menu -->
       <a class="MainNavButton" href="#">Animals</a><!-- hover over me to show the "animals" menu -->
       <div class="SubNavWrapper"> <!-- This is a wrapper that is absolutly positioned off the screen, until
                                             the "animals" link is hovered over -->                  
          <div class="SubNav"><!-- This is a parent with floating children -->
              <!-- this is a child that floats left -->
              <div class="SubNavSectionWrapper">                        
                <div class="SubNavSectionTitle">Fish</div>
                <ul class="SubNavSectionList">
                   <li><a href="#">Gold Fish</a></li>
                   <li><a href="#">Barracuda</a></li>
                </ul>
             </div>
             <!-- this is a child that floats left -->
             <div class="SubNavSectionWrapper">
                <div class="SubNavSectionTitle">Reptiles</div>
                <ul class="SubNavSectionList">
                   <li><a href="#">Lizzards</a></li>
                   <li><a href="#">Snakes</a></li>
                   <li><a href="#">Iguanas</a></li>
                </ul>
             </div>
             
             <!-- this is a child that floats left -->
             <div class="SubNavSectionWrapper">
                <div class="SubNavSectionTitle">Birds</div>
                <ul class="SubNavSectionList">
                   <li><a href="#">Parakeets</a></li>
                </ul>
             </div>              
          </div><!-- END SubNav -->
       </div><!-- END SubNavWrapper -->
    </li><!-- END Animals Menu -->
</ul>  
</div> <!-- END Nav Bar -->

我通过强制父级为固定宽度来获得它。但是父母需要根据孩子的不同而变化，而不是固定的宽度。

Answer 1

浮动.Parent div s：

Live Demo

我的测试CSS：

.Parent {
    float: left;
    background: #ccc;

    margin: 0 0 16px 0;
    clear: both
}
.Child {
    float: left;
    width: 150px;
    height: 50px;
}

---

当你没有float: left父div时会发生这种情况：

http://jsfiddle.net/thirtydot/AG3c9/1/