html - 为什么我的 box div 位于本应位于其上方的两个元素后面？

Question

我是一名网页设计新手，正在尝试解决我的 css 和/或 html 的问题。我的页面有两个 grid50 div，它们应该位于彩色框 div 之上。但是，该框位于其他部分的后面(尽管框内容被下推)。

我的 html:

<div>
<div class="grid-50 tablet-grid-50 mobile-grid-100 first-column">
   <?php $description = get_field('country_description', $term); 
    echo "<p>" . $description . "</p>";
     ?>
 </div>
 <div class="grid-50 tablet-grid-50 mobile-grid-100 second-column">

  <?php $description = get_field('country_description', $term);
  $map = get_field('country_map', $term);
  echo do_shortcode( ' '. $map .' ' ); 
    ?>
  </div>
</div>
<div class="infobox">
    <?php 
    $when = get_field('info_box_when', $term);
     $where = get_field('info_box_where', $term);
     $moment = get_field('info_box_moment', $term);
     $fact = get_field('info_box_fact', $term);
    $description = get_field('info_box', $term); 
    echo '<h6>' . 'When we visited:   ' . '</h6>' . '<p>' . $when . '</p>' . '<br>' .
        '<h6>' . 'Major stops:   ' . '</h6>' . '<p>' . $where . '</p>' . '<br>' .
        '<h6>' . 'Memorable moment:   ' . '</h6>' . '<p>' . $moment . '</p>' . '<br>' .
        '<h6>' . 'Did you know?   ' . '</h6>' . '<p>' . $fact . '</p>';
                    ?>
</div>

我的CSS:

.infobox {
    background-color: #bf593a;
    color: white;
    padding: 5%;
    border-radius: 10px ;
    margin-left:6%;
    margin-right: 6%;
    margin-top: 8%;
    margin-bottom: 10%;;
}

结果如下: https://theslowroad.org/category/destinations/asia/laos/

橙色框应该在文本和 map 下方。

Answer 1

看起来橙色 block 上方的文本和 map 是 float 的，这意味着您需要清除它。将 clear: both; 添加到橙色 (.infobox) 框的规则中。