Div布局问题：如何将hello文本置于定价区域下方

问题原因 #

当前.gallery和.cardBx都设置了float: left，导致这些元素脱离正常文档流，<main>容器无法被内容撑开，.bddiv会被浮动元素挤压，无法自然排列在商品区域下方。同时原代码中每个商品卡片都被独立的.gallery和.cardBx包裹，进一步打乱了布局结构。

修复方案 #

1. 移除不必要的浮动属性 #

删除.gallery和.cardBx中的float: left，因为已经通过display: flex实现卡片的横向排列，浮动属性会干扰正常布局流。

2. 统一商品卡片容器 #

将所有商品卡片放在同一个.cardBx容器中，利用flex布局实现横向排列，避免每个卡片单独占用容器导致布局分散。

3. 调整.bddiv为块级元素 #

让.bddiv以块级元素展示，确保它占据整行，自然流到商品区域下方。

修改后的代码 #

CSS 修改部分 #

/* 移除.gallery的float属性 */
.gallery {
  position: relative;
  /* float: left;  删除此行 */
}

/* 移除.cardBx的float属性 */
.cardBx {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* 添加换行，适配不同屏幕 */
  /* float: left;  删除此行 */
}

/* 修改.bddiv样式 */
.bddiv {
  display: block; /* 改为块级元素 */
  color: #1aeeef;
  margin-top: 30px; /* 添加顶部间距，优化视觉 */
  padding: 0 20px;
}

HTML 修改部分 #

<main> 
  <?php include './slider/slider.php' ?>

  <?php
    include 'shopdb.php';
    $sql="SELECT * from shop_table";
    $query=mysqli_query($conn,$sql);
  ?>
  <!-- 统一的卡片容器，所有商品卡片放在这里 -->
  <div class="cardBx">
    <?php while($info=mysqli_fetch_array($query)){ ?>
      <div class="card" data-item="pc">
        <img src="shop/<?php echo $info['imageup']; ?>" alt="loading">
        <div class="content">
          <h4><?php echo $info['gamename']; ?></h4>
          <div class="progress-line"><span></span></div>
          <div class="info">
            <p>pricing<br /><span> <?php echo $info['price']; ?></span></p>
            <a href="#">Buy Now</a>
          </div>
        </div>
      </div>
    <?php } ?>
  </div>

  <div class="bddiv"> hello</div>
</main>

效果说明 #

• 移除浮动后，<main>容器会被商品内容正常撑开，.bddiv作为块级元素会自然排列在所有商品卡片的下方。
• 统一的.cardBx容器配合flex-wrap: wrap，会让商品卡片在屏幕宽度不足时自动换行，同时保持横向排列的布局逻辑。

内容的提问来源于stack exchange，提问作者Avishak_poddar