Parent div 没有用 children 扩展，为什么不呢？

Question

我的 parent div 没有展开以保持其 children 的高度。我读到：位置：绝对；浮动：任何；

两者都毁了这个。问题是确实包含绝对元素的 div 确实扩展了，但是 div 包含 position: relative;, div 并没有扩展。我想添加一个 link 用于查看，但我的页面还没有在服务器上（我直接从 Firefox 中的 HTML 查看它。）

澄清：是.banner_sectiondiv拒绝展开。

我的HTML

<header>
    <?php include 'header.php'; ?>
        <div class="menu_section">
            <label for="show-menu" class="show-menu">Show Menu</label>
            <input type="checkbox" id="show-menu" role="button"></input>
                <ul id="menu">
                  <li><a href="index.html">HEM</a>
                    <li><a href="hudvard.html">HUDVÅRD</a>
                    <li><a href="fotvard.html">FOTVÅRD</a>
                    <li><a href="massage.html">MASSAGE</a>
                    <li><a href="tejpning.html">TEJPNING</a>
                    <li><a href="varumarken.html">VÅRA VARUMÄRKEN</a>
                    <li><a href="omoss.html">OM OSS</a>
                    <li><a href="kontakt.html">KONTAKT</a>
                    <li><a href="kontakt.html">ONLINEBOKNING</a>
                    <li><a href="kontakt.html">TELEFONBOKNING</a>
                </ul> 
        </div>
    <div class="banner_section">
      <div class="rslides_container">
        <ul class="rslides">
          <li><img src="images/index_banner.jpg" /></li>
          <li><img src="images/fot_banner.jpg" /></li>
          <li><img src="images/massage_banner.jpg" /></li>
          <li><img src="images/tejpning_banner.jpg" /></li>
          <li><img src="images/hudvard_banner.jpg" /></li>
          <li><img src="images/omoss_banner.jpg" /></li>
        </ul>
      </div>
        <script>
          $(function() {
            $(".rslides").responsiveSlides({
              auto: true, speed: 1500, timeout: 2000, nav: true,
            });
          });
        </script>
    </div>
  </header>

我的CSS

.banner_section{
    background-color: #83AFB4;
    margin-bottom: 20px;
}
.banner{
    width: 100%;
    height: 269px;
    margin-bottom: 0;
    padding-bottom: 0;
}
.rslides_container {
    margin-bottom: 50px;
    position: relative;
    float: left;
    width: 100%;
    max-width: 960px;
}
.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0 auto;
}

.rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
}

.rslides li:first-child {
    position: relative;
    display: block;
    float: left;
}

.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
}

.rslides1_nav {
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 0px;
    opacity: 0.7;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    height: 61px;
    width: 38px;
    background: url("themes.gif") no-repeat scroll left top transparent;
    margin-top: -45px;
}
.prev{
    background: red;
}

.next{
    background: red;
}

Answer 1

要使 parent 取决于 child div，您必须使 parent

postion:relative

然后将 child 的宽度和高度设置为您想要的任何值，parent 将自动调整。

让我们看看演示： DEMO

Answer 2

好的，检查一下。

我向父横幅添加了 clearfix，我有一个 fiddle 在这里工作：

http://jsfiddle.net/lharby/x6qmtyqo/3/embedded/result/

这是 clearfix css:

.clearfix:after { 
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clear { overflow:hidden; clear:both; height:1px; margin:-1px 0px 0px 0px; font-size:1px; }
.clear-simple {clear:both; }

然后我将 clearfix class 添加到您的 banner_section，所以：

<div class="banner_section clearfix">

让我知道这是否适合您（它也在图像下方添加了边距，但您在 css 中指定了该边距）。

Parent div 没有用 children 扩展，为什么不呢？

Parent div not expanding with children, why not?

html

css

css-position

responsive-design