如何自动使 div 足够宽以容纳其浮动子项?
如何自动使 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 -->
我通过强制父级具有固定宽度来得到它。但父级需要根据其子级而变化,而不是固定宽度。
How do I make a div automatically wide enough to accomodate its floating children?
<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>
The Child divs are all "float:left" with fixed widths. How do I make the Parent div be equal to the width of it's floating children? The number of children in each parent varies and is unknown but the children must line up in a row, without wrapping to a new line.
Example: If all three children are 150px, the parent should become 450px so that none of the children wrap. If there are two 150px children, the parent should become 300px.
Here's a demo of the problem:
#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 -->
When you hover over animals, you can see that birds, reptiles and fish are stacked on top of each other. They should show side by side.
This is what I want it to look like:
#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 -->
I got it by forcing the parent to be a fixed width. But the parent needs to vary based on it's children and not be a fixed width.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
浮动
.Parent
div
:现场演示
我的测试CSS:
这是当您不
float: left
父div时会发生的情况:< a href="http://jsfiddle.net/thirtydot/AG3c9/1/" rel="noreferrer">http://jsfiddle.net/thirtydot/AG3c9/1/
Float the
.Parent
div
s:Live Demo
My Test CSS:
This is what happens when you don't
float: left
the parent div:http://jsfiddle.net/thirtydot/AG3c9/1/