如何使 3 个盒子响应移动设备？答案

【问题标题】：How to make 3 boxes responsive for mobile?如何使 3 个盒子响应移动设备？
【发布时间】：2021-10-13 11:25:06
【问题描述】：

我有这三个盒子

这就是它们在桌面上的显示方式，但我需要让它们具有响应性，当有人在智能手机上打开页面时，这 3 个图像不能保持水平线，而是垂直。这是 HTML

<div class="gallery-140721">
            <div class="gallery-card-140721">
                <a href="" target="_blank"></a><img
                        src="galeria-hotsite-modelo-molas-vl-1.jpg" alt="modelo 1"></a>
                <p class="gallery-title-140721">|MOLAS ENSACADAS|</p>
                <p class="gallery-text-140721">Cama Box Herval Lofty</p>
            </div>

            <div class="gallery-card-140721">
                <a href=""
                    target="_blank"><img src="galeria-hotsite-modelo-molas-vl-2.jpg" alt="modelo 1"></a>
                <p class="gallery-title-140721">|MOLAS MAXSPRING|</p>
                <p class="gallery-text-140721">Cama Box Herval Irland</p>
            </div>

            <div class="gallery-card-140721">
                <a href=""
                    target="_blank"><img src="galeria-hotsite-modelo-molas-vl-3.jpg" alt="modelo 1" /></a>
                <p class="gallery-title-140721">|Molas Bonnel|</p>
                <p class="gallery-text-140721">Cama Box Herval Troya</p>
            </div>
        </div>

我对这一切都很陌生，如果这是一个非常愚蠢的问题，我很抱歉......

【问题讨论】：

travishorn.com/…
这能回答你的问题吗？ Responsive Images with CSS

标签： html css alignment

【解决方案1】：

声明这些元素的显示类型flex然后用flex-direction: column添加媒体查询 display: grid 也可以这样做

【讨论】：

【解决方案2】：

您可以添加媒体查询。它将以较小的分辨率附加样式。例如，这样的事情可以帮助你。

  @media only screen and (max-width: 700px) {
      .gallery-card-140721 {
        width: 100%;
      }
    }

这里有更多关于媒体查询https://www.w3schools.com/css/css_rwd_mediaqueries.asp

【讨论】：