有关可折叠内容的部分需要帮助

时间:2016-01-23 20:19:08

标签: jquery html css

我一直在使用stackoverflow很长一段时间,今天我有机会在这里问我怀疑。希望很快得到解决。

所以基本上我试图在本网站上实现FAQ部分的功能:http://yourquestions.mcdonalds.ca/faq

我试图通过使用.hide& amp;来复制设计。 .slideToggle函数在jquery和一点点css,但我面临内容流的问题。当我点击第一个标题它正常运行但不是第二个标题(当我点击第二个标题时左边有空格)。

我的代码(Js小提琴):https://jsfiddle.net/o2e7d20h/

此外,我如何向代码中的每个标题添加+/-(或折叠/展开)并切换它(寻求帮助因为我对jquery不好)。

jQuery(document).ready(function() {
  jQuery(".content").hide();
  jQuery(".heading").click(function() {
    jQuery(this).next(".content").slideToggle(500);
  });
});
.layer1 {
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
}

.heading {
  color: #fff;
  cursor: pointer;
  position: relative;
  margin: 2%;
  padding-bottom: 2em;
  padding-top: 2em;
}

.content {
  margin: 2%;
  position: relative;
  background-color: #fff;
  position: relative;
  color: #000 !important;
}

#boxes {
  margin: 0;
  padding: 0;
  width: 50%;
  max-width: 50%;
  height: auto;
  float: left;
  text-align: center;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layer1">

  <div id="boxes">
    <p class="heading" style="background-color:#D1422F; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#E38D82; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#32B36B; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#85D3A6; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#25969D; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#7cc0c4; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#813B73; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#b389ab; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#007BB6; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#66afd3; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#7C1B3B;color:#fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#b07689; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#D1422F; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#E38D82; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#32B36B; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#85D3A6; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#25969D; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#7cc0c4; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#813B73; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#b389ab; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#007BB6; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#66afd3; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#7C1B3B;color:#fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#b07689; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

</div>

感谢您对此提供任何帮助......

1 个答案:

答案 0 :(得分:1)

首先,您正在使用id的&#34;框&#34;对于多个元素。您需要确保所有id都是唯一的。这似乎也不是盒子的正确分离。

我已更新您的小提琴,使用divbox-section来分隔这两个群组。

Updated Fiddle

总之,您的Html现在如下所示:

<div class="box-section">
  6 boxes
</div>

<div class="box-section">
  6 boxes
</div>