javascript - 将内容包裹在父元素中

Question

我在将所有内容包装在父项中时遇到问题。我的 jQuery 工作正常。我打算做的是制作幻灯片。幻灯片运行完美，但我的问题是将所有内容包装在“红色框”内。现在 ID 为“allprojects”的部分不会扩展以填充其中部分的所有内容。理想情况下，“#allprojects”应该根据内容收缩或扩展。这就是它的样子
因为我错过了一些明显的东西？请帮助我。

下面是我的 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

您已使用绝对定位您的部分。这使它们脱离了自然流动，因此 wrapper 不知道它们的体积并塌陷。

你要么需要指定 slider 的大小，要么做一些技巧，比如，

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

然后修改它以获得您想要的比率。