html - 附加内容不会位于为移动设备堆叠的包装 DIV 下方

Question

我有两个部分介绍网站上的用例和好处。如下。

.onboardmessaging {
    min-width: 100%;  
}

.onboardmessagingwrap {
    min-width: 100%;  
}

.usecase {
    padding-left: 8vw;
    max-width: 50%;
    float: left;
}

.benefits {
    padding-right: 8vw;
    max-width: 50%;
    float: right;
}

@media only screen and (max-width: 500px) {
.usecase {
    padding-left: 0;
    min-width: 100%;
    float: left;
}
}

@media only screen and (max-width: 500px) {
.benefits {
    padding-right: 0;
    min-width: 100%;
    float: right;
}
}

<div class="onboardmessagingwrap">
  <div class="onboardmessaging">
    <div class="usecase">
       <p class="title">Title</p>
       <p class="sentence">1</p>
       <p class="sentence">2</p>
       <p class="sentence">3</p>
       <p class="sentence">4</p>
    </div>
    <div class="benefits">
       <p class="title">Title</p>
       <p class="sentence">1</p>
       <p class="sentence">2</p>
       <p class="sentence">3</p>
       <p class="sentence">4</p>
    </div>
  </div>
</div>
<br>
<p>Why does this sit underneath and not below the lists?</p>

它们并排放置得很好，但添加到页面的任何更多内容最终都位于页面下方，而不是紧挨着页面。我真的不确定为什么会这样，因为我关闭了所有 DIV 并添加了一个额外的 DIV。

消息 Why does this sit understand not below the lists? 应该在它下面。

任何帮助将不胜感激，在此先感谢。

Answer 1

您想清除 float 。这是执行此操作的常用方法。

替换

    <br>

与

    <div class="clearfix"></div> 

并添加到您的 CSS

    .clearfix::after {
      content: "";
      clear: both;
      display: table;
    }

或者，您也可以将 clearfix 类添加到 onboardmessagingwrap div 并获得相同的结果，而无需添加错误的 div。

有关 CSS float 的更多信息，请参阅:https://www.w3schools.com/css/css_float.asp