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 underneath and not below the lists?应该在其下方。

任何帮助，在此先感谢。

Answer 1

您要清除浮点数。这是一种常见的方法。

替换

    <br>

与

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

并添加到您的CSS

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

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

有关CSS浮动的更多信息，请参见：https://www.w3schools.com/css/css_float.asp

其他内容不会位于包装成可移动设备堆叠的DIV下方

1 个答案: