You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何将9个带独立样式的div卡片排成两行并保证合理间距？

avatar
安全阿岳
2026-7-24
问题描述

我有9个带有独特间距与内边距样式的div容器，需要将它们排列为两行，确保每个div卡片拥有充足间距以提升可读性。当前布局为一行div容器，换行后间距不一致，以下是我的CSS及Bootstrap HTML代码。

原CSS代码 

.cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.card {
  width: 100px;
  height: 100px;
  
}

.card img {
  max-width: 60px;
  max-height: 60px;
}

.card h3 {
  font-size: 16px;
  margin-top: 10px;
}

.card-container > .card {
    width: 120px;
    height: 120px;
}

.card-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 50px;
    padding: 10px;
}

.icon {
    font-size: 24px;
    margin-right: 5px;
}

h3 {
    margin: 0;
    font-size: 14px;
}

原Bootstrap HTML代码 

<!-- 按品类购物模块开始 -->
<div id="hot">
  <div class="box py-4">
    <div class="container">
      <div class="row">
        <div class="col-md-9">
          <h2 class="mb-0">
            Shop by Categories
          </h2>
          <!-- 健康美妆图标 -->
<a href="category-full.html">
  <div class="cards-container d-flex justify-content-between">
    <div class="card-container">
      <div class="card">
        <div class="card-body">
          <div class="row flex-wrap">
            <div class="col-12">
              <img src="img/eShop-Images/NewBeauty.png.png">
              <h3>Health and Beauty</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</a>

  <!-- 服饰配饰图标-->
  <a href="category-full.html">
    <div class="card-container">
      <div class="card">
        <div class="card-body">
          <div class="row flex-wrap">
            <div class="col-12">
              <img src="img/eShop-Images/clothes_accessories.png.png">
              <h3>Clothing & Accessories</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a>

           <!-- 玩具爱好图标-->
                    <a href="category-right.html">
                    <div class="card-container">
                        <div class="card">
                            <div class="card-body">
                                <div class="row flex-wrap">
                                    <div class="col-12">
                                      <img src="img/eShop-Images/toys_hobbies.png.png">
                                        <h3>Toys & Hobbies</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                  </a>
          <!-- 家居家电图标-->
                    <a href="category-full.html">
                    <div class="card-container">
                        <div class="card">
                            <div class="card-body">
                                <div class="row flex-wrap">
                                    <div class="col-12">
                                      <img src="img/eShop-Images/home_improvement.png.png">
                                      <h3>Home & Appliances</h3>
                            
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                  </a>

            
                <!-- 运动户外图标-->
                    <a href="category-right.html">
                    <div class="card-container">
                        <div class="card">
                            <div class="card-body">
                                <div class="row flex-wrap">
                                    <div class="col-12">
                                        <img src="img/eShop-Images/sport_outdoor.png.png" style="width: 56px;">
                                        <h3>Sport & Outdoor</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                  </a>

                  <!-- 电脑平板图标-->
                    <a href="category-right.html">
                    <div class="card-container">
                        <div class="card">
                            <div class="card-body">
                              <div  class="row flex-wrap">
                                    <div class="col-12">
                                        <img src="img/eShop-Images/computers_hardware.png.png" style="width: 56px;">
                                        <h3>Computer & Tablets</h3>
                                    </div>
                                  </div>
                            </div>
                        </div>
                    </div>
                  </a>
                  

                         <!-- 电子游戏图标-->
                    <a href="category-right.html">
                    <div class="card-container">
                      <div class="card">
                        <div class="card-body">
                          <div class="row flex-wrap">
                            <div class="col-12">
                              <img src="img/eShop-Images/video_games.png.png" style="width: 56px;">
                              <h3>Video Games</h3>
                            </div>
                          </div>
                        </div>
                      </div>
                </div>
              </a>

                   <!-- 亲子家庭图标-->
                <a href="category-right.html">
                <div class="card-container">
                  <div class="card">
                    <div class="card-body">
                      <div class="row flex-wrap">
                        <div class="col-12">
                          <img src="img/eShop-Images/kids_family.png.png" style="width: 56px;">
                          <h3>Kids & Family</h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </a>

              
              <!-- 办公设备图标 -->
                <a href="category.html">
                  <div class="card-container">
                    <div class="card">
                      <div class="card-body">
                        <div class="row flex-wrap">
                          <div class="col-12">
                            <img src="img/eShop-Images/office_equipment.png.png" style="width: 56px;">
                            <h3>Office equipment</h3>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>
               
          </div>
          </div>
          </div>
          </div>
          </div>
解决方案

1. 修复核心结构错误

原代码第一个分类的<a>标签错误包裹了cards-container，导致其余8个卡片不在Flex容器内，这是布局混乱的根本原因。需要将所有卡片统一放入同一个cards-container，并把<a>嵌套在card-container内部：

<!-- 按品类购物模块开始 -->
<div id="hot">
  <div class="box py-4">
    <div class="container">
      <div class="row">
        <div class="col-md-9">
          <h2 class="mb-0">按品类购物</h2>
          <!-- 统一控制所有卡片的Flex容器 -->
          <div class="cards-container d-flex flex-wrap justify-content-center gap-4 py-3">
            <!-- 健康美妆图标 -->
            <div class="card-container">
              <a href="category-full.html">
                <div class="card">
                  <div class="card-body">
                    <div class="row flex-wrap">
                      <div class="col-12 text-center">
                        <img src="img/eShop-Images/NewBeauty.png.png">
                        <h3>健康美妆</h3>
                      </div>
                    </div>
                  </div>
                </div>
              </a>
            </div>
            <!-- 服饰配饰图标 -->
            <div class="card-container">
              <a href="category-full.html">
                <div class="card">
                  <div class="card-body">
                    <div class="row flex-wrap">
                      <div class="col-12 text-center">
                        <img src="img/eShop-Images/clothes_accessories.png.png">
                        <h3>服饰配饰</h3>
                      </div>
                    </div>
                  </div>
                </div>
              </a>
            </div>
            <!-- 剩余7个卡片按照上述结构依次添加 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2. 优化CSS样式

调整样式确保卡片间距统一，排版更美观：

/* 全局卡片容器，用gap统一控制水平/垂直间距 */
.cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* 卡片间的统一间距 */
}

.card-container > .card {
    width: 120px;
    height: 120px;
    padding: 10px;
    box-sizing: border-box; /* 内边距不撑开卡片尺寸 */
}

.card-body {
    display: flex;
    flex-direction: column; /* 图标与文字垂直排列 */
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
}

.card img {
    max-width: 60px;
    max-height: 60px;
    object-fit: contain;
}

.card h3 {
    font-size: 14px;
    margin-top: 8px;
    text-align: center;
    margin: 0;
}

h3 {
    margin: 0;
    font-size: 14px;
}

关键说明

  • 所有卡片纳入同一Flex容器后，flex-wrap: wrap会自动按容器宽度换行，gap属性确保每行卡片水平、垂直间距完全一致。
  • 将card-body改为垂直排列，更符合分类卡片的视觉逻辑，同时添加text-center让文字居中对齐。

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.24 23:07:51