Question

我在父级内部包含所有内容时遇到问题。我的jQuery工作正常。我打算做的是制作幻灯片。幻灯片显示工作正常，但我的问题是将所有内容包装在“红色框”内。具有id“allprojects”的右侧部分不会展开以填充其中部分的所有内容。理想情况下，“＃allprojects”应根据内容收缩或扩展。这就是它的出现方式 enter image description here 我错过了一些明显的东西？请帮帮我。

贝娄是我的HTML。

<div id="projects">
     <section id="allprojects" >
        <section id="projectone" class="show">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo semper nulla, id ultricies erat tincidunt at. Vivamus malesuada justo eu massa fringilla, a lacinia justo hendrerit. Integer ornare ipsum non dictum suscipit. Quisque feugiat eleifend posuere. Maecenas porttitor non neque in tempus. Aliquam 
        </section>
        <section id="projecttwo">
           Nam quis ante tellus. Nullam iaculis elementum odio at convallis. Duis sodales porttitor dolor sed lacinia. Mauris sodales, ipsum eu tristique varius, erat mauris luctus tellus, ultrices viverra leo dui at nunc. Sed ac malesuada tellus. Nam quis lacus sit amet nibh egestas adipiscing. Interdum et malesuada fames ac ante 
        </section>
        <section id="projectthree">
           Nulla vitae volutpat nunc. Integer ornare enim vitae euismod viverra. Pellentesque ac hendrerit orci. Praesent eleifend augue luctus magna fringilla posuere. Nulla tincidunt volutpat semper. Morbi malesuada tempus vehicula. Proin non posuere metus. Aenean condimentum velit lorem. Donec at suscipit leo. Morbi 
        </section>
        <section id="projectfour">
           Vestibulum mattis metus rhoncus enim sollicitudin vehicula. Duis id nisl eget neque laoreet sagittis vitae eu justo. Sed et elit sit amet augue dictum dignissim. Cras neque ligula, dictum sed nibh ut, sodales malesuada mi. Duis feugiat semper nibh eget feugiat. In vestibulum augue nec felis tincidunt pulvinar 
        </section>
        <span class="prev">&laquo;</span>
        <span class="next">&raquo;</span>

     </section>

  </div>

CSS：

    html{

    background-size: cover;
    background-color: #F2F2F2 ;
    max-height: 100%;
    margin: 0 auto;


}
body{
    max-height: 100%;
    background-color: #F2F2F2 ;
    margin: 0 auto;
}

#allprojects section{

  position: absolute;
  opacity: 0;
  transition: 1s opacity;

}
.show{
  opacity: 1 !important;
  position: static;
  transition: 1s opacity;
}
.next, .prev{
  color: #fff;
  position: absolute;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 1;
  font-size: 2em;
  margin-top: -.75em;
  opacity: .3;
  user-select: none;
}
.next:hover, .prev:hover{
  cursor: pointer;
  opacity: 1;
}
.next{
  right: 26%;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.prev{
  left: 26%;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
#allprojects{
    font-family: 'Gabriela', serif;
    text-align: justify;
    width: 40%;
    font-size: 1.7vw;
    color: #000;
    line-height: 150%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    margin-bottom: auto;
    padding: 4%;
      background-color: #F2F2F2;
      -webkit-border-radius: 2px;
         -moz-border-radius: 2px;
              border-radius: 2px;
              border: 5px solid #D8262E;
    display: block;
}
#allprojects section{
  font-family: 'Gabriela', serif;
    text-align: justify;
    width: 40%;
    font-size: 1.7vw;
    color: #000;
    line-height: 150%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

Answer 1

您已经绝对地定位了您的部分。这使它们脱离了自然流动，因此，包装物不知道它们的体积和坍塌。

你需要指定滑块的大小，或者做一些技巧，如

height: 0px; padding-bottom: 50%;

并破解它以获得你想要的比例。

Answer 2

绝对定位的元素将从DOM流中取出。

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/?redirect_from_locale=hr#Absolute_and_fixed

您的父容器不知道子元素的高度，这就是红框不清除它们的原因。

将内容包装在父元素中

2 个答案: