当列不能放在 1 行中时，使它们整齐地水平放置

make cols fit neetly horizontally when they cant fit in 1 row

提问人：learny_mc_learny 提问时间：11/14/2023 最后编辑：learny_mc_learny 更新时间：11/14/2023 访问量：34

问：

我有一行有 6 列，当列不能放在屏幕上的其他列旁边时，其中 2 列被放在下面，但看起来有点乱。

我可以通过媒体查询来解决这个问题，但我想知道是否有更好的方法可以使放在下面的 2 个更“漂亮”地放置

这张图片可能比我的解释要好

例

update（示例代码）

<div class="row">
                <div class="col-sm-2 quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'python_logo.png' %}" alt="python_logo">
                    <p>
                      python
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'AWS-logo-2.jpg' %}" alt="aws_logo">
                    <p>
                      aws
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'selenium.png' %}" alt="selenium_logo">
                    <p>
                      selenium
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'Csharp_Logo.png' %}" alt="csharp_logo">
                    <p>
                      C#
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'django.png' %}" alt="django_logo">
                    <p>
                      django
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'docker.png' %}" alt="docker_logo">
                    <p>
                      docker
                    </p>
                  </div>
                </div>
              </div>
HTML css-grid 引导程序-5

评论

0赞 Moob 11/14/2023
我们在这里没有什么可做的。请提供一些示例代码。请参见：stackoverflow.com/help/how-to-ask
0赞 learny_mc_learny 11/14/2023
嗨，我添加了有问题的 HTML
0赞 Moob 11/14/2023
注意：ID 应该是唯一的。具有多个元素是无效的 html。id="box"

答：

1赞 Moob 11/14/2023 #1

对于 Flexbox，这可能是最简单的。在此演示中，我将内容放在一个可调整大小的容器中，以便您可以看到项目如何重排。

#resizeAreaForDemo {
  border: 2px dotted;
  padding: 10px;
  width: 450px;
  resize: both;
  overflow: auto;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
}

.row .quick_skills_col {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 100px;
  /* the min size you want these to be */
  height: 80px;
  background: #eee;
  border: 1px solid grey;
}

.row .quick_skills_col img {font-size:8px;}
<div id="resizeAreaForDemo">

<div class="row">
                <div class="col-sm-2 quick_skills_col" id="box0">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'python_logo.png' %}" alt="python_logo">
                    <p>
                      python
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box1">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'AWS-logo-2.jpg' %}" alt="aws_logo">
                    <p>
                      aws
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box2">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'selenium.png' %}" alt="selenium_logo">
                    <p>
                      selenium
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box3">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'Csharp_Logo.png' %}" alt="csharp_logo">
                    <p>
                      C#
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box4">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'django.png' %}" alt="django_logo">
                    <p>
                      django
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box5">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'docker.png' %}" alt="docker_logo">
                    <p>
                      docker
                    </p>
                  </div>
                </div>
              </div>
              </div>

上一个：GRID 元素的问题，在 GRID 网格内的元素之间移动 [已关闭]

下一个：如何让这些网格项对齐？