Как сделать div автоматически достаточно широким, чтобы вместить его плавающих детей? - PullRequest
Новая
       24

Как сделать div автоматически достаточно широким, чтобы вместить его плавающих детей?

6 голосов
/ 20 марта 2011

Как мне сделать 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>

Все дочерние элементы имеют «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 -->

Я получил это, заставив родителя иметь фиксированную ширину. Но родитель должен варьироваться в зависимости от его потомков, а не фиксированной ширины.

1 Ответ

6 голосов
/ 20 марта 2011

Float .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/

...