html - 如何使 div 自动变宽以容纳其 float 的子项？-6ren

html - 如何使 div 自动变宽以容纳其 float 的子项？

转载作者：太空狗更新时间：2023-10-29 15:02:25

如何使 div 自动变宽以容纳其 float 的子元素？

<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”。如何使 Parent div 等于其 float 子项的宽度？每个 parent 的 child 数量各不相同且未知，但 child 必须排成一排，不能换行。

示例:如果所有三个子项均为 150px，则父项应变为 450px，以便所有子项都不会换行。如果有两个 150px 的 child ， parent 应该变成 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 需要根据它的 child 而变化，而不是固定宽度。

最佳答案

float .Parent div:

Live Demo

我的测试 CSS:

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

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

这就是当您不float: left parent div 时发生的情况:

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

关于html - 如何使 div 自动变宽以容纳其 float 的子项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5367056/

文章推荐： android - 如何在android中以编程方式创建alertdialog

文章推荐： c - AES (aes-ige-128, aes-ige-192, aes-ige-256) 加密/解密与 openssl C

文章推荐：使用 wkhtmltopdf 将 html 转为 pdf

文章推荐： html5 - 拖动 Canvas

CSS:随着屏幕宽度变小，是否可以使 div 变宽？
我想尝试将 div 宽度设置为屏幕大小的倒数，直到它达到最大值 100%，仅使用 CSS(请不要使用 JS)。为了清楚起见，这里有一个例子: 如果屏幕尺寸为 500px 宽，则 div 宽度将为 1
c++ - 如何使 slider 控件的 slider 变宽？ (使用 MFC)
我想知道如何调整 slider 以使宽度比实际宽度更宽？第一张图片是当前状态的图片。第二张图片是我正在寻找的图片.. slider 是 CSlierCtrl，我使用的是 mfc。最佳答案听起来你

太空狗

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何使 div 自动变宽以容纳其 float 的子项？