Question

我的父母div没有扩展以保持孩子的身高。我读到了：位置：绝对; float：any;

两者都毁了这个。事实上，持有绝对元素的div确实会扩展，但是持有这个的div，位置：relative;，div不会扩展。我添加了一个用于查看的链接，但我的页面还没有在服务器上（我在Firefox中直接从HTML查看它。）

澄清：拒绝扩展是.banner_section div。

我的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

好的，请检查一下。

我在父横幅上添加了clearfix，我在这里有一个小提琴：

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; }

然后我在你的banner_section中添加了clearfix类，所以：

<div class="banner_section clearfix">

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

Answer 2

要根据子div创建父级，您必须创建父级

postion:relative

并根据需要设置孩子的宽度和高度，父母将调整它。

让我们看看演示： DEMO

父母不与孩子一起扩张，为什么不呢？

2 个答案: