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

【问题标题】：How do I make a div automatically wide enough to accommodate its floating children?如何使 div 自动宽到足以容纳其浮动的孩子？
【发布时间】：2011-03-20 06:07:48
【问题描述】：

如何使 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>

子 div 都是具有固定宽度的“float:left”。如何使父 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 -->

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

【问题讨论】：

  • 那么现在发生了什么？他们换行了吗？你在 Parent 上尝试过width:auto 吗？
  • 你在什么浏览器中测试这个？我使用的是 Chrome，你粘贴的两个链接都是一样的。鸟类、爬行动物和鱼类彼此相邻，而不是在另一个之上。
  • 我不太喜欢你做这个菜单的方式 :-) 问题是 div 在 li 内，继续给第二个 li 550px 的宽度，然后是 div开始按您的意愿工作。但这显然不是解决方案
  • 所以我应该只使用 div 来处理整个事情并摆脱列表吗？我以前从未制作过纯 CSS 菜单，这是基于建议使用嵌套列表的教程。
  • 我找不到任何不使用 ul/li 的 css 菜单示例...

标签： html css css-float word-wrap


【解决方案1】：

浮动.Parentdivs：

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/

【讨论】：

  • 我尝试了你的建议，但它仍然坚持堆叠孩子。 （我的问题看起来不像你的第二个“坏”例子）。它将父 div 设置为一个子 div 的宽度，并将所有三个子 div 垂直放置，一个在下一个下方。我想我想要的是它应该工作的方式，但我的问题完全是另一回事？我会在上面添加更多代码。
  • 你是对的 - 你问的问题和你的实际问题完全不同。我通过使用display: inline-block 解决了您的实际问题。我在 IE7、IE8 和最新版本的 Firefox、Chrome、Safari、Opera 中测试了我的解决方案。这里是：jsfiddle.net/AG3c9/16 - CTRL+F for /* NEW */ 查看两个新部分。我还从几个地方删除了float: left。
  • 感谢您的超越！我猜这在 IE6 中不起作用，但我不确定我是否在乎。在某些时候，人们只需要更新他们的浏览器！再次感谢！
  • 您的原始代码无论如何都不会在 IE6 中工作，因为这样的选择器：#nav li:hover ul.SubNavSectionList a。 IE6 仅在 a 元素上支持 :hover。如果你真的想要，你可以解决这个问题，但是 - 让我们忘记 IE6。
猜你喜欢
  • 2014-06-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-11-04
  • 2021-12-17
  • 2010-09-23
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode