如何在 html/css 中的移动/平板电脑视图中将方形框对齐成一条直线？答案

【问题标题】：How to align square boxes in a straight line in a mobile/tablet view in html/css?如何在 html/css 中的移动/平板电脑视图中将方形框对齐成一条直线？
【发布时间】：2018-05-18 19:30:33
【问题描述】：

我有一个如下所示的屏幕截图，我已在fiddle 中复制了它。此时，它在桌面视图中看起来非常好。

为了在桌面视图中对齐方框，我使用的 CSS 代码的 sn-ps 是：

.squares .square {
    width: 13%;
    text-align: center;
    height: 150px;
    padding-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(145, 147, 150);
    border-radius: 10px;


}

当我在移动视图中看到小提琴时，它看起来非常无组织。

问题陈述：

我想知道我应该在小提琴中进行哪些更改，以便在移动视图中 3 个方形框排成一行，而其他 2 个方形框排在它下方的中间（或一个中的 2 个和另一行中的 2 个也可以使用）。

我尝试使用如下所示的媒体查询，但由于某些原因，我无法复制我想要的内容。

@media only screen and (max-width: 767px) {
.squares .square {
    width: 41%;
    text-align: center;
    height: 150px;
    margin-bottom: 11%;
    padding-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(145,147,150);
    border-radius: 10px;
}
}

【问题讨论】：

也许考虑在父级上使用display: flex; flex-flow: row wrap;
@Adam 感谢您的回答。我想知道你是否可以在小提琴中更新它。

标签： html css responsive-design media-queries

【解决方案1】：

这就是 flexbox 的用途。我已经为您制作了一个小模型，以便为您的目的重新创建它。对于较小的显示器，它可能需要一些媒体查询，但这取决于您的喜好。使用本指南获取更多参考 - CSS-Tricks Flexbox Guide。

.container {
  background: #1D1F20;
  padding: 1em 2em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  
}

.card {
  width: 120px;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1em;
  margin: 1em 0;
  text-align: center;
  border-radius: 10px;
}

.image img {
  width: 100%;
  object-fit: contain;
}

.text {
  padding: 0 1em;
}

.text p {
  -webkit-margin-after: 0; /* resetting predefined margin */
}

.arrows {
  padding: 0.5em;
}

<div class="container">
  <div class="card">
    <div class="image">
      <img src="http://via.placeholder.com/150x150" alt="">
    </div>
    <div class="text">
      <p>Nibh Risus Pellentesque</p>
    </div>
  </div>
  <div class="arrows">
    <div><img src="http://via.placeholder.com/100x100" alt=""></div>
  </div>
  <div class="card">
    <div class="image">
      <img src="http://via.placeholder.com/150x150" alt="">
    </div>
    <div class="text">
      <p>Nibh Risus Pellentesque</p>
    </div>
  </div>
  <div class="arrows">
    <div><img src="http://via.placeholder.com/100x100" alt=""></div>
  </div>
  <div class="card">
    <div class="image">
      <img src="http://via.placeholder.com/150x150" alt="">
    </div>
    <div class="text">
      <p>Nibh Risus Pellentesque</p>
    </div>
  </div>
  <div class="arrows">
    <div><img src="http://via.placeholder.com/100x100" alt=""></div>
  </div>
  <div class="card">
    <div class="image">
      <img src="http://via.placeholder.com/150x150" alt="">
    </div>
    <div class="text">
      <p>Nibh Risus Pellentesque</p>
    </div>
  </div>
  <div class="arrows">
    <div><img src="http://via.placeholder.com/100x100" alt=""></div>
  </div>
  <div class="card">
    <div class="image">
      <img src="http://via.placeholder.com/150x150" alt="">
    </div>
    <div class="text">
      <p>Nibh Risus Pellentesque</p>
    </div>
  </div>
  <div class="arrows">
    <div><img src="http://via.placeholder.com/100x100" alt=""></div>
  </div>
  <div class="card">
    <div class="image">
      <img src="http://via.placeholder.com/150x150" alt="">
    </div>
    <div class="text">
      <p>Nibh Risus Pellentesque</p>
    </div>
  </div>
</div>

【讨论】：