在桌面上水平对齐图像，在移动设备上垂直对齐图像答案

【问题标题】：Align images horizontally on desktop and vertically on mobile在桌面上水平对齐图像，在移动设备上垂直对齐图像
【发布时间】：2017-10-03 11:17:11
【问题描述】：

我的网站上有 4 张图片，我想在桌面上水平显示，在移动设备上垂直显示。（我刚开始学习 HTML，所以我对编码基本上一无所知）

我唯一能想到的就是找到一种方法来设置多个图像，只要它们有空间，它们就会彼此相邻对齐。

所以我将每张图片的宽度设置为 24%。它在桌面上完美运行，但当然在移动设备上它们也像在桌面上一样水平

    <div>

<img src="xxx.jpg" width="24%">

<img src="yyy.jpg" width="24%">

<img src="zzz.jpg" width="24%">

<img src="ccc.jpg" width="24%">

</div>

在寻找解决方案后，我了解了浮动标签并尝试了以下方法

    <div>

<img src="xxx.jpg" style="float: left; width: 24%; margin-right: 1%; margin-bottom: 0.5em;">

<img src="yyy.jpg" style="float: left; width: 24%; margin-right: 1%; margin-bottom: 0.5em;">

<img src="zzz.jpg" style="float: left; width: 24%; margin-right: 1%; margin-bottom: 0.5em;">

<img src="ccc.jpg" style="float: left; width: 24%; margin-right: 1%; margin-bottom: 0.5em;">

</div>

但同样的事情又发生了。它在移动设备上水平显示图像。

有谁知道这个问题的解决方案？

如果有帮助，我正在使用 shopify 托管我的网站。

【问题讨论】：

为什么不使用引导程序？
贴一些你试过的代码
developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…，也别忘了css-tricks.com/snippets/html/responsive-meta-tag

标签： html css shopify

【解决方案1】：

你的工作已经完成了。在你的浏览器上运行这段代码。这里媒体查询用于移动显示。你应该学习如何为你关心的问题制作响应你的网站。努力工作:)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.img {
display:inline;
}
@media screen and (max-width: 480px) and (min-width: 320px) {
    /* For mobile phones: */
* {
    box-sizing: border-box;
}
.img {
display:block;
} }
</style>
</head>
<body>
<div class="img">
<img src="xxx.jpg" width="200px" height="300px">
<img src="yyy.jpg" width="200px" height="300px">   
<img src="zzz.jpg" width="200px" height="300px">    
<img src="ccc.jpg" width="200px" height="300px">   
</div>
</body>
</html>

【讨论】：

【解决方案2】：

如果你把你的图片包装成 li 或者

@media only screen and (max-device-width: 768px) {
   img {display:block;width:100% !important}
}

【讨论】：

对不起，正如我所提到的，我知道的代码很少。我正在使用 shopify，我假设您建议的代码是 css，所以我将该部分引用为“whyyou”（p class="whyyou"），然后将以下代码粘贴到我的 theme.css.liquid "p.whyyou { img {display:block;width:100%} }" 不幸的是它们是垂直显示的
为什么是 p.whyyou ？，您可以将整个代码粘贴到您的 css 文件中
我怎样才能控制图像的显示位置？
你不需要做任何事情，只需将上面的代码粘贴到你的 css 文件或
像这样
添加一个“响应式”类到图片的父级div，然后使用 .responsive img {display:block;width:100% !important}